<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2024 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import { slide, fade } from "svelte/transition";
    import { onMount } from "svelte";
    import { importPagefind, type Pagefind, type PagefindDocument } from "@type/pagefind.js";
    import Card from "@components/Card.svelte";
    import { l } from "@utils/util.ts";
    let pagefind: Pagefind;

    onMount(async () => {
        pagefind = await importPagefind();

        pagefind.init();
    });

    let results: PagefindDocument[] = $state([]);

    async function search(e: KeyboardEvent) {
        if (e.target instanceof HTMLInputElement) {
            let search: { results: any[] } = await pagefind.debouncedSearch(e.target.value);

            results = await Promise.all(search.results.slice(0, 10).map((value) => value.data()));
        }
    }

    interface Props {
        open?: boolean;
    }

    let { open = $bindable(false) }: Props = $props();
</script>

<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => (open = false)}> </button>
<div transition:slide style="width: min(100%, 75em);" class="fixed top-0 left-1/2 -translate-x-1/2 h-2/3 z-30 p-4 text-white flex flex-col sw-search-panel">
    <input placeholder="Search..." onkeypress={search} />

    <div class="overflow-y-scroll flex-1 w-full mt-2">
        {#each results as result}
            <Card extraClasses="w-full m-0 my-2 border-t-2 border-t-amber-500/30" hoverEffect={false}>
                <a class="grid grid-cols-3" href={l(result.url)}>
                    <h1>{result.meta.title}</h1>
                    {#each result.sub_results.slice(0, 2) as sub_result}
                        <p>{@html sub_result.excerpt}</p>
                    {/each}
                </a>
            </Card>
        {/each}
    </div>
</div>

<style lang="postcss">
    .sw-search-panel {
        background: rgba(8, 8, 8, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(24px);
    }

    input {
        width: 100%;
        padding: 0.7rem 1rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #f5f5f5;
        font-size: 0.9rem;
        outline: none;
        transition: border-color 0.2s ease;
    }

    input:focus {
        border-color: rgba(245, 158, 11, 0.5);
    }

    label {
        color: rgba(163, 163, 163, 0.7);
    }
</style>
