<script lang='ts'>
  import { createEventDispatcher } from 'svelte';

  export let ruleName;
  export let title
  export let value;
  export let min;
  export let max;
  export let step;
  export let unit = '';
  export let condition;

  const dispatch = createEventDispatcher();

  function changeRuleCondition(newCondition) {
    condition = newCondition
    dispatch('changeCondition', { rule: ruleName, condition: newCondition });
  }

  function changeValue(val) {
    dispatch('changeValue', { rule: ruleName, value: val });
  }
</script>

<!--
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
  {title?.replace('[%]','')} {condition} {value} {unit}

  <label on:click={() => changeRuleCondition('under')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
    <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
           checked={condition === 'under'} name={ruleName} />
    <span class="label-text text-white">Under</span> 
  </label>
  <label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
    <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
           checked={condition === 'over'} name={ruleName} />
    <span class="label-text text-white">Over</span> 
  </label>
</div>

<div class="w-full pt-5">
  <input type="range" min={min} max={max} step={step} bind:value on:input={changeValue} class="range range-secondary" />
</div>
-->


 <!--Start Added Rules-->
<div class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-default">
  <div class="text-white text-[1rem]">
      {title?.replace('[%]','')}
  </div> 
  <div class="flex items-center">
      <button class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-none" title="Remove filter">
          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="CurrentColor" style="max-width:40px">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
      </button> 
      <div class="relative inline-block text-left">
        <div class="dropdown dropdown-end">
          <button tabindex="0" class="bg-[#000] h-[33px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate">
              <span class="truncate ml-2">
                {#if value === '' || condition === ''} 
                Any
                {:else}
                {condition} {value}{unit}
                {/if}
              </span> 
              <svg class=" ml-1 h-6 w-6 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
          </button> 
          
          <div class="dropdown-content absolute z-40 mt-2 rounded-md bg-[#181C1F] py-1 shadow-lg border border-gray-600 focus:outline-none" tabindex="0" role="menu">

            <div class="select-none space-y-1 p-1 pb-2 pr-2 text-sm">
                <div class="flex items-center justify-start gap-x-1">
                    <div class="relative inline-block flex flex-row items-center justify-center m-auto">
                        <label on:click={() => changeRuleCondition('under')} class="cursor-pointer flex flex-row mr-2 justify-center items-center">
                          <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
                               checked={condition === 'under'} name={ruleName} />
                          <span class="label-text text-white">Under</span> 
                        </label>
                        <label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
                          <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
                            checked={condition === 'over'} name={ruleName} />
                          <span class="label-text text-white">Over</span> 
                        </label>
                    </div>
                </div> 
            </div> 

            <div class="thin-scrollbar dark:styled-scrollbar dark:right-scrollbar max-h-[250px] overflow-y-auto overflow-x-hidden overscroll-contain border-t border-gray-600 
                dark:border-dark-500 xl:max-h-[297px]">
                {#each step as newValue}
                  <button on:click={() => changeValue(newValue)} class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 sm:hover:bg-gray-100 sm:hover:text-gray-900 
                                  focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
                    {condition} {newValue}{unit}
                  </button>
                {/each}
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
<!--End Added Rules-->