"use client";
import { useDebouncedCallback } from "use-debounce";
import { PageHeader } from "../general/PageHeader";
import { useSearchParams, usePathname, useRouter } from "next/navigation";
import { getSearchPath } from "@/lib/common";
export function SearchContainer({
  query,
  results,
}: {
  query: string;
  results: any;
}) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  const onQueryChange = useDebouncedCallback((query) => {
    replace(getSearchPath(query));
  }, 500);

  return (
    <div>
      <PageHeader heading="Søk" />
      <input
        name="query"
        type="text"
        autoFocus
        defaultValue={query ?? ""}
        onChange={(e) => {
          onQueryChange(e.target.value);
        }}
      />
      {query && <SearchResults results={results} />}
    </div>
  );
}

function capitalizeFirstLetter(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

const PAGE_TYPES: Record<string, string> = {
  NewsPage: "Nyhet",
  EventPage: "Arrangement",
  GenericPage: "Underside",
  VenuePage: "Lokale",
  AssociationPage: "Forening",
};

function SearchResults({ results }: { results: any }) {
  if (!results.length) {
    return <div>Ingen resultater 😔</div>;
  }
  const supportedResults = results.filter(
    (result: any) =>
      !!result?.id && Object.keys(PAGE_TYPES).includes(result.__typename)
  );
  return (
    <div>
      {supportedResults.map((result: any) => {
        let resultType = PAGE_TYPES[result.__typename] ?? "";
        if (result.__typename === "AssociationPage") {
          resultType = capitalizeFirstLetter(result?.associationType);
        }
        return (
          <div key={result.id}>
            <span>{resultType}</span>
            <span>{result.title}</span>
          </div>
        );
      })}
    </div>
  );
}