import { ComponentChildren } from "preact";
import { resources } from "@lib/resources.ts";
import { CSS, KATEX_CSS } from "https://deno.land/x/gfm@0.2.5/mod.ts";
import { Head } from "$fresh/runtime.ts";
import Search, { RedirectSearchHandler } from "@islands/Search.tsx";
import { KMenu } from "@islands/KMenu.tsx";
import { Emoji } from "@components/Emoji.tsx";
import { SearchResult } from "@lib/types.ts";

export type Props = {
  children: ComponentChildren;
  title?: string;
  name?: string;
  url: URL;
  description?: string;
  context?: { type: string };
  searchResults?: SearchResult;
};

export const MainLayout = (
  { children, url, title, context, searchResults }: Props,
) => {
  const hasSearch = url.search.includes("q=");

  return (
    <div
      class="md:grid mx-auto"
      style={{ gridTemplateColumns: "200px 1fr", maxWidth: "1024px" }}
    >
      <Head>
        <style>{CSS}</style>
        <style>{KATEX_CSS}</style>
        {title &&
          <title>{title}</title>}
      </Head>
      <aside class="p-4 hidden md:block">
        <nav
          class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0"
          hx-boost="true"
        >
          {Object.values(resources).map((m) => {
            return (
              <a
                href={m.link}
                class={`flex items-center gap-2  ${
                  m.link === url.pathname ? "bg-white text-black" : "text-white"
                } p-3 text-xl w-full rounded-2xl`}
              >
                {<Emoji class="w-6 h-6" name={m.emoji} />} {m.name}
              </a>
            );
          })}
        </nav>
      </aside>
      <main
        class="py-5"
        style={{ fontFamily: "Work Sans" }}
      >
        {hasSearch && (
          <Search
            q={url.searchParams.get("q")}
            {...context}
            results={searchResults}
          />
        )}
        {!hasSearch && children}
      </main>
    </div>
  );
};
