<script>
  import { createEventDispatcher } from 'svelte';
  import Icon from "./Icon.svelte"

  export let alltopics;
  export let hideTopic = false;

  let showForm = true;

  let query = {
    text: "",
    topic: "",
    level: "",
    sortby: "rating",
    tag: ""
  };

	const dispatch = createEventDispatcher();

  $: dispatch('queryChanged', query);

</script>

<div class="sticky z-10 top-16 bg-gradient-to-r from-lightGradOne to-lightGradTwo rounded">
  <div class="relative pt-1">
    {#if  showForm == false}
    <div class="bg-primary rounded absolute top-0 right-0">
      <button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary lg:hidden">
        <span class="sr-only">Open search form</span>
        <Icon kind="search"/>
      </button>
    </div>    
    {/if}

    {#if showForm}
    <div class="bg-primary rounded absolute top-0 right-0">
      <button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary lg:hidden">
        <span class="sr-only">Close search form</span>
        <Icon kind="close"/>
      </button>
    </div>
    {/if}

    {#if showForm}
      <form class="w-full p-2 gap-3 mt-10 lg:mt-0 flex flex-col xl:flex-row" on:submit|preventDefault>
          <sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
            <sl-icon name="search" slot="prefix"></sl-icon>
          </sl-input>

          {#if !hideTopic}
            <fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
              {#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
                <fluent-option value={topic.name}>{topic.display_name}</fluent-option>
              {/each}
            </fluent-combobox>
          {/if}

        <div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
          <sl-select class="w-full"  on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
            <sl-menu-item value="">Any tag</sl-menu-item>
            <sl-menu-item value="inspirational">Inspirational</sl-menu-item>
            <sl-menu-item value="educational">Educational</sl-menu-item>
            <sl-menu-item value="challenging">Challenging</sl-menu-item>
            <sl-menu-item value="entertaining">Entertaining</sl-menu-item>
            <sl-menu-item value="visual">Visual</sl-menu-item>
            <sl-menu-item value="interactive">Interactive</sl-menu-item>
            <sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
          </sl-select>

          <sl-select class="w-full"  on:sl-change="{e => query.level = e.target.value}" value={query.level}>
            <sl-menu-item value="">Any level</sl-menu-item>
            <sl-menu-item value="childlike">Childlike</sl-menu-item>
            <sl-menu-item value="beginner">Beginner</sl-menu-item>
            <sl-menu-item value="intermediate">Intermediate</sl-menu-item>
            <sl-menu-item value="advanced">Advanced</sl-menu-item>
            <sl-menu-item value="research">Research</sl-menu-item>
          </sl-select>
        </div>

        <sl-select class="w-full md:w-1/2" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
          <sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
          <sl-menu-item value="rating">Sort by Rating</sl-menu-item>
          <sl-menu-item value="year">Sort by Year</sl-menu-item>
          <sl-menu-item value="name">Sort by Name</sl-menu-item>
        </sl-select>
      </form>
    {/if} 
  </div> 
</div>
