<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,
        RemoveFormatting,
        Search,
        LoaderCircle
    } from 'lucide-svelte';

    import { ae_loc } from '$lib/stores/ae_stores';
    import { events_loc, events_sess } from '$lib/stores/ae_events_stores';

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

            <select
                bind:value={$events_loc.leads.qry__sort_order}
                onchange={handle_search_trigger}
                class="select select-sm text-xs px-1 max-w-fit"
            >
                <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 border-success-500 hover:preset-tonal-success text-2xl font-bold w-48 transition-all"
            >
                {#if $events_sess.leads.submit_status__search === 'searching'}
                    <LoaderCircle class="animate-spin mx-1" />
                {:else}
                    <Search class="mx-1" />
                {/if}
                Search
            </button>

            <button
                type="button"
                class:hidden={!$events_loc.leads.qry__search_text}
                onclick={() => {
                    $events_loc.leads.qry__search_text = '';
                    handle_search_trigger();
                }}
                class="btn btn-sm text-xs preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-100-900 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 hover:opacity-100 transition-all"
    >
        {#if $ae_loc.edit_mode}
            <label
                class="flex items-center gap-1 cursor-pointer bg-surface-200-800 px-2 py-1 rounded-token text-xs font-semibold"
            >
                <span> Remote First </span>
                <input
                    type="checkbox"
                    bind:checked={$events_loc.leads.qry__remote_first}
                    onchange={handle_search_trigger}
                    class="checkbox checkbox-sm"
                />
            </label>
        {/if}
    </div>
</div>
