import { JSX } from "preact";
import { type PublicUser } from "@/types.ts";

const NAV_ITEM_CLASSES =
  "flex justify-center items-center px-4 py-2 hover:bg-gray-300 dark:hover:bg-gray-700";

const HEADER_CLASSES = "bg-gray-200 dark:bg-gray-800";

export function LoginNavItems() {
  return (
    <>
      <a
        tabIndex={12}
        href="/register"
        class={`${NAV_ITEM_CLASSES} ml-auto`}
      >
        Register
      </a>
      <a tabIndex={13} href="/login" class={NAV_ITEM_CLASSES}>Login</a>
    </>
  );
}

export function UserNavItems() {
  return (
    <>
      <a
        tabIndex={12}
        href="/profile"
        class={`${NAV_ITEM_CLASSES} ml-auto`}
      >
        Profile
      </a>
      <a tabIndex={13} href="/dashboard" class={NAV_ITEM_CLASSES}>Dashboard</a>
      <a tabIndex={13} href="/logout" class={NAV_ITEM_CLASSES}>Logout</a>
    </>
  );
}

export interface PageProps extends JSX.HTMLAttributes<HTMLDivElement> {
  user?: PublicUser;
}

export function Page(props: PageProps) {
  return (
    <div class="relative min-h-screen flex flex-col">
      <header class="flex justify-start items-center">
        <nav class={`flex w-full drop-shadow-md ${HEADER_CLASSES}`}>
          <a
            tabIndex={10}
            href="/"
            class={`${NAV_ITEM_CLASSES} text-black dark:text-white`}
          >
            <h1 class="text-2xl">LyricScreen</h1>
          </a>
          <a tabIndex={11} href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
          {props.user ? UserNavItems() : LoginNavItems()}
        </nav>
      </header>
      <main class="p-2">
        {props.children}
      </main>
      <footer class={`p-2 w-full mt-auto ${HEADER_CLASSES}`}>
        "It's a bit much, really..."
      </footer>
    </div>
  );
}