<script>
  import { onMount } from 'svelte';
  import { Chevron } from 'flowbite-svelte'
  import inferno from '../../assets/inferno.png'
  import turbo from '../../assets/turbo.png'
  import spectral from '../../assets/spectral.png'
  import rainbow from '../../assets/rainbow.png'
  import * as d3 from 'd3'; 
  import { colormap } from '../canvas_properties';

  let show = true;
  export let selected_colormap = "turbo";

  let handleDropdown = () => {
    if (show === true) {
      show = false;  
      return;
    }
    show = true;
  }
  let dropdown_position_left;
  let dropdown_position_top;

  let options = [
    {
      name: "Turbo",
      pic: turbo,
      checked: true,
      fn: d3.interpolateTurbo
    }, {
      name: "Inferno",
      pic: inferno,
      checked: false,
      fn: d3.interpolateInferno
    }, {
      name: "Rainbow",
      pic: rainbow,
      checked: false,
      fn: d3.interpolateRainbow
    }, {
      name: "Spectral",
      pic: spectral,
      checked: false,
      fn: d3.interpolateSpectral
    }
  ]

  let handleChoice = (value) => {
    console.log("Choice:", value);
    $colormap = value.fn;
    let tmp = [];
    options.forEach((element) => {
      if (value.name == element.name){
        tmp.push({
          name: value.name,
          pic: value.pic,
          checked: true,
          fn: value.fn
        });
      } else {
        tmp.push({
          name: element.name,
          pic: element.pic,
          checked: false,
          fn: element.fn
        });
      }
    })
    options = [...tmp]
  }

  onMount(() => {
    let dropdown_element = document.getElementById("dropdown_button");
    dropdown_position_left = dropdown_element.offsetLeft;
    dropdown_position_top = dropdown_element.offsetTop;

  })
  
  $: console.log("colormap", $colormap)

  function setBorderClass(opt_checked) {
    if (opt_checked) {
      return "border-5  bg-success" ;
    } 
    return "border-2";
  }
</script>


<button
  id="dropdown_button"
  class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" on:click={handleDropdown}>
  <Chevron>Colormaps</Chevron>
</button>

{#if show}
  <div style="margin-top=20px; margin-top={dropdown_position_top}px">
    {#each options as opt}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div
        class="border rounded form-check {setBorderClass(opt.checked)}"
        on:click={() => handleChoice(opt)} >
        <input 
          class="form-check-input" 
          type="radio"
          name={opt.name}
          id="flexRadioDefault1"
          bind:group={selected_colormap}
          value={opt.name}
          checked={opt.checked}
          on:click={() => handleChoice(opt)} />
        <img src={opt.pic} height="10px" alt="inferno" />
        <label id="colorlabel" for="flexRadioDefault1">{opt.name}</label>
      </div>
    {/each}
  </div>
{/if}

<style>
  .border {
    margin-top: 5px;
  }
  img {
    height: 20px;
    width: 80%;
    padding-top: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }
  input {
    margin-left: 5px !important;
  }
  .form-check {
    display: inline-block;
  }
</style>