<script lang="ts" context="module">
  import generic_lamp from "./icons/generic_lamp.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 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 square from "./icons/square.svg?raw";
  import hexagon from "./icons/hexagon.svg?raw";
  import triangle from "./icons/triangle.svg?raw";

  export const iconMap = Object.seal({
    generic_lamp,
    generic_boob,
    generic_ball,
    generic_strip,
    hue_signe,
    hue_dimmerswitch,
    hue_motionsensor,
    hue_lightbulb_e27,
    hue_lightbulb_e14,
    hue_lightbulb_gu10,
    hue_adore_tube,
    hue_playbar,
    square,
    hexagon,
    triangle,
    hue_go,
  });

  export type IconName = keyof typeof iconMap;
</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: IconName;

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

  let icon: string;
  $: icon = iconMap[name] || iconMap.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>