<script lang="ts">
interface Props {
    event_id: string;
    log_lvl?: number;
}

let { event_id, log_lvl = 0 }: Props = $props();

// *** Import other supporting libraries
import {
    Library,
    LoaderCircle,
    RemoveFormatting,
    Search
} from '@lucide/svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import { events_sess } from '$lib/stores/ae_events_stores';
import { leads_loc } from '$lib/stores/ae_events_stores__leads.svelte';

function handle_search_trigger() {
    leads_loc.current.search_version++;
}

function prevent_default<T extends Event>(fn: (event: T) => void) {
    return function (event: T) {
        event.preventDefault();
        fn(event);
    };
}
</script>

<div
    class="ae_group filters_and_search flex w-full flex-col items-center justify-center gap-2">
    <form
        onsubmit={prevent_default(() => {
            handle_search_trigger();
        })}
        autocomplete="off"
        class="search_form preset-tonal-success flex w-full max-w-7xl flex-row flex-wrap items-center justify-center gap-1 rounded-lg px-2 py-2 shadow-sm md:px-12">
        <div
            class="flex grow flex-col items-center justify-center gap-1 md:flex-row">
            <input
                type="search"
                placeholder="Exhibitor name or code..."
                id="exhibit_fulltext_search_qry_str"
                bind:value={leads_loc.current.qry__search_text}
                autocomplete="off"
                data-lpignore="true"
                class="input grow font-mono text-lg transition-all"
                onkeyup={(e) => {
                    if (e.key === 'Enter') {
                        handle_search_trigger();
                    }
                }}
                title="Search by name or code. Press Enter." />

            <select
                bind:value={leads_loc.current.qry__sort_order}
                onchange={handle_search_trigger}
                class="select select-sm max-w-fit px-1 text-xs">
                <option value="name_asc">Name ASC</option>
                <option value="name_desc">Name DESC</option>
                <option value="code_asc">Booth # ASC</option>
                <option value="code_desc">Booth # DESC</option>
                <option value="updated_desc">Updated DESC</option>
            </select>
        </div>

        <div class="flex flex-row items-center justify-center gap-1">
            <button
                type="submit"
                class="btn btn-lg preset-tonal-success border-success-500 hover:preset-tonal-success w-48 border text-2xl font-bold transition-all">
                {#if $events_sess.leads.submit_status__search === 'searching'}
                    <LoaderCircle class="mx-1 animate-spin" />
                {:else}
                    <Search class="mx-1" />
                {/if}
                Search
            </button>

            <button
                type="button"
                class:hidden={!leads_loc.current.qry__search_text}
                onclick={() => {
                    leads_loc.current.qry__search_text = '';
                    handle_search_trigger();
                }}
                class="btn btn-sm preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-100-900 text-xs transition-all"
                title="Clear search query">
                <RemoveFormatting size="1.25em" />
                <span class="hidden md:inline"> Clear </span>
            </button>
        </div>
    </form>

    <div
        class="flex flex-row flex-wrap items-center justify-center gap-2 opacity-70 transition-all hover:opacity-100">
        {#if $ae_loc.edit_mode}
            <label
                class="bg-surface-200-800 rounded-token flex cursor-pointer items-center gap-1 px-2 py-1 text-xs font-semibold">
                <span> Remote First </span>
                <input
                    type="checkbox"
                    bind:checked={leads_loc.current.qry__remote_first}
                    onchange={handle_search_trigger}
                    class="checkbox checkbox-sm" />
            </label>
        {/if}
    </div>
</div>
