<script lang="ts" context="module">
  import generic_lamp from "./icons/generic_lamp.svg?raw";
  import generic_lamp2 from "./icons/generic_lamp2.svg?raw";
  import generic_boob from "./icons/generic_boob.svg?raw";
  import generic_ball from "./icons/generic_ball.svg?raw";
  import generic_strip from "./icons/generic_strip.svg?raw";
  import generic_pendulum_01 from "./icons/generic_pendulum_01.svg?raw";
  import hue_signe from "./icons/hue_signe.svg?raw";
  import hue_dimmerswitch from "./icons/hue_dimmerswitch.svg?raw";
  import hue_motionsensor from "./icons/hue_motionsensor.svg?raw";
  import hue_lightbulb_e27 from "./icons/hue_lightbulb_e27.svg?raw";
  import hue_lightbulb_e14 from "./icons/hue_lightbulb_e14.svg?raw";
  import hue_lightbulb_gu10 from "./icons/hue_lightbulb_gu10.svg?raw";
  import hue_adore_tube from "./icons/hue_adore_tube.svg?raw";
  import hue_playbar from "./icons/hue_playbar.svg?raw";
  import hue_go from "./icons/hue_go.svg?raw";
  import shape_square from "./icons/shape_square.svg?raw";
  import shape_hexagon from "./icons/shape_hexagon.svg?raw";
  import shape_hexagon_corner from "./icons/shape_hexagon_corner.svg?raw";
  import shape_triangle from "./icons/shape_triangle.svg?raw";
  import hue_ensis_up from "./icons/hue_ensis_up.svg?raw";
  import hue_ensis_down from "./icons/hue_ensis_down.svg?raw";

  export const deviceIconMap = Object.seal({
    generic_lamp,
    generic_lamp2,
    generic_boob,
    generic_ball,
    generic_strip,
    hue_signe,
    hue_dimmerswitch,
    hue_motionsensor,
    hue_lightbulb_e27,
    hue_lightbulb_e14,
    hue_lightbulb_gu10,
    generic_pendulum_01,
    hue_adore_tube,
    hue_playbar,
    shape_square,
    shape_hexagon,
    shape_hexagon_corner,
    shape_triangle,
    hue_go,
    hue_ensis_up,
    hue_ensis_down,
  });

  export const deviceIconList = Object.seal(Object.keys(deviceIconMap).sort()) as DeviceIconName[];

  export type DeviceIconName = keyof typeof deviceIconMap;
</script>

<script lang="ts">
	import type { ColorRGB } from "$lib/models/color";
	import { rgbToHex } from "$lib/utils/color";

  export let brightColor: ColorRGB;
  export let darkColor: ColorRGB;
  export let name: DeviceIconName;

  let gandalf: string;
  let voldemort: string;
  $: gandalf = rgbToHex(brightColor);
  $: voldemort = rgbToHex(darkColor);

  let icon: string;
  $: icon = deviceIconMap[name] || deviceIconMap.generic_lamp;

  let dataUrl: string;
  $: {
    if (icon != null) {
      const data = encodeURIComponent(
        icon
          .replaceAll("fill:#ff0000", `fill:${gandalf}`)
          .replaceAll("fill:#0000ff", `fill:${voldemort}`)
      );
      dataUrl = `data:image/svg+xml;url,${data}`
    }
  }
</script>

<div class="icon">
  <img alt="icon" src={dataUrl} />
  <slot></slot>
</div>

<style>
  div.icon > img {
    width: 1em;
    height: 1em;
  }
</style>