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>
    </>
  );
}