<script lang="ts" context="module">
  export const DARK_COLOR = rgb(0.5176470588235295/2, 0.5333333333333333/2, 0.5607843137254902/1.75);
  export const DARK_COLOR_SELECTED = rgb(0.5176470588235295/1.5, 0.5333333333333333/1.5, 0.5607843137254902/1.25);
</script>

<script lang="ts">
	import { getSelectedContext } from "$lib/contexts/SelectContext.svelte";
	import type Device from "$lib/models/device";
	import { rgb, type ColorRGB } from "../models/color";
	import Icon from "./Icon.svelte";
	import Lamp from "./Lamp.svelte";

  export let name: string
  export let devices: Device[];

  let selected: boolean;

  const {selectedMap, toggleMultiSelection} = getSelectedContext();

  function onSelect() {
    toggleMultiSelection(devices.map(d => d.id));
  }

  $: selected = !devices.find(d => !$selectedMap[d.id])
  $: tiny = devices.length > 30;
  $: allAliases = devices.flatMap(d => d.aliases).sort().filter((e, i, a) => a[i-1] !== e);
  $: allTags = allAliases.filter(a => a.startsWith("lucifer:tag:")).map(a => a.split(":")[2]);
  $: allRoles = allAliases.filter(a => a.startsWith("lucifer:role:")).map(a => a.split(":")[2]);
  $: uncommon = allAliases.filter(a => devices.find(d => !d.aliases.includes(a)))
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="metalamp" class:selected>
  <div class="row">
    <div class="title" on:click={onSelect}>{name}</div>
  </div>
  <div class="row" class:tiny>
    {#each devices as device (device.id)}
      <Lamp compact device={device} />
    {/each}
    <!-- Skittent datasnok -->
    {#each Array.from({length: 64}) as _}
      <div style="width: 3.6ch"></div>
    {/each}
  </div>
  <div class="row">
    {#if allTags.length > 0 || allRoles.length > 0}
      <div class="tag-list">
        {#each allRoles as role}
          <div class="tag" class:uncommon={uncommon.includes(`lucifer:role:${role}`)}>
            <Icon block name="masks_theater" />
            <div class="tag-name">
              {role}
            </div>
          </div>
        {/each}
        {#each allTags as tag}
          <div class="tag" class:uncommon={uncommon.includes(`lucifer:tag:${tag}`)}>
            <Icon block name="tag" />
            <div class="tag-name">
              {tag}
            </div>
          </div>
        {/each}
      </div>
    {/if}
  </div>
</div>

<style lang="sass">
  div.metalamp
    user-select: none
    cursor: pointer
    width: 19ch
    margin: 0.5ch
    background: #18181c
    color: #84888f
    border-radius: 0.5ch
    border-top-right-radius: 1em
    overflow: hidden
    box-shadow: 1px 1px 1px #000
    padding-bottom: 0.5ch

    @media screen and (max-width: 1921px)
      width: calc(20% - 1ch)

    @media screen and (max-width: 1600px)
      width: calc(25% - 1ch)

    @media screen and (max-width: 1200px)
      width: calc(33.3333333% - 1ch)    

    @media screen and (max-width: 700px)
      width: calc(50% - 1ch)
      margin-top: 0.75ch
      margin-bottom: 0.75ch
    
    @media screen and (max-width: 380px)
      width: 100%

    &.selected
      background: #282833
      color: #cde

    > div.row 
      width: 100%
      padding: 0 0.4ch
      box-sizing: border-box
      width: 100%
      display: flex
      flex-direction: row
      flex-wrap: wrap
      align-content: center
      justify-content: space-between

      &.tiny
        margin-top: 0.2em
        font-size: 0.4em

      > div.tag-list
        display: flex
        flex-direction: row
        font-size: 0.5em
        margin-top: 0.5em

        > div.tag
          display: flex
          flex-direction: row
          padding: 0 0.5ch
          padding-right: 1ch

          &.uncommon
            opacity: 0.333
          
          div.tag-name
            padding-left: 0.5ch

      > div.title
        font-size: 0.75em
        text-align: left
        margin-top: 0.4em
        margin-right: 1ch
        height: 1.6em
        user-select: none
        margin-left: 0.4ch
        width: 100%
</style>