<script lang="ts">
  import Lamp from "$lib/components/Lamp.svelte";
	import MetaLamp from "$lib/components/MetaLamp.svelte";
	import RoomHeader from "$lib/components/RoomHeader.svelte";
	import { getSelectedContext } from "$lib/contexts/SelectContext.svelte";
	import { getStateContext } from "$lib/contexts/StateContext.svelte";

  const {roomList} = getStateContext();
  const {selectedMasks} = getSelectedContext();
</script>

<div class="page">
  {#each $roomList as room (room.name)}
    <RoomHeader devices={room.devices} name={room.name} />
    <div class="devices">
      {#each room.devices as device (device.id) }
        <Lamp device={device} />
      {/each}
    </div>
    <div class="devices">
      {#each room.groups as group (group.name)}
        <MetaLamp name={group.name} devices={group.devices} />
      {/each}
    </div>
  {/each}
</div>
<pre>{JSON.stringify($selectedMasks, null, 4)}</pre>

<style>
  div.page {
    margin: 0 auto;
    width: 200ch;
    max-width: 95%;
    margin-top: 1em;
    font-size: 1.33rem;
  }

  div.devices { 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  div.devices + div.devices {
    margin-top: 0.25em;
  }
</style>