import { Doc } from "../src/collect.ts";
import { useEffect, useState } from "preact/hooks";
import { Index } from "../src/client_search.ts";
import { encodePath } from "../util/util.ts";

function SearchBar(props:{
    search?: string;
    onSearch?: (search: string) => void;
}){
    const [search, setSearch] = useState(props.search ?? "");
    return (
        <div class="flex items-center justify-center">
            <input type="text" class="w-1/2 px-4 py-2 border-2 rounded-lg" placeholder="Search..." 
                //onChange={(event)=>{}}
                onKeyUp={(event)=>{
                    if (event.currentTarget.value === search) return;
                    setSearch(event.currentTarget.value);
                    props.onSearch?.(event.currentTarget.value);
                }}>{search}</input>
        </div>
    )
}

export default function DocSearch(props: {
    docs: Doc[]
}){
    const [docs, setDocs] = useState(props.docs);
    const index = Index.createIndex(props.docs);

    return (
        <>
            <SearchBar onSearch={(s)=>{
                setDocs(index.search(s));
            }}></SearchBar>
            <h1 class="text-2xl font-bold">Doc</h1>
            <ul class="mt-4">
                {docs.map((doc) => (
                    <li class="mt-2">
                        <a href={`/dir/${encodePath(doc.path)}`}> {doc.path}</a>
                    </li>
                ))}
            </ul>
        </>
    )
}