import { Head } from "$fresh/runtime.ts";
import { Handlers, PageProps } from "$fresh/server.ts";
import { RepoData, getRepos, searchRepos } from "../api/repo.ts";
import { useState } from "preact/hooks";
import { SearchBar } from "../components/SearchBar.tsx";
import RepoViewer from "../islands/RepoViewer.tsx";

export const handler: Handlers<RepoData[] | null> = {
  async GET(req, ctx) {
    try {
      const url = new URL(req.url);
      const query = url.searchParams.get("q");
      if (query) {
        const repos = await searchRepos(query);
        return ctx.render(repos);
      }
      else {
        const repos = await getRepos();
        return ctx.render(repos);
      }
    } catch (error) {
      console.error(error);
      return ctx.render(null);
    }
  }
}

export default function Home({ data }: PageProps<RepoData[] | null>) {
  const [searchValue, setSearchValue] = useState("");
  return (
    <>
      <Head>
        <title>Search Github Awesome App</title>
      </Head>
      <div class="p-4 mx-auto max-w-screen-md">
        <h1 class="text-4xl font-bold">Search Github Awesome App</h1>
        <SearchBar value={searchValue} onChange={() => { }} />
        <RepoViewer repos={data || []} />
      </div>
    </>
  );
}
