"use client";

import { useCart } from "@shopify/hydrogen-react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { Menu, ShoppingCart, Search, UserRound } from "@esmate/shadcn/pkgs/lucide-react";
import { Button } from "@esmate/shadcn/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@esmate/shadcn/components/ui/sheet";
import { Badge } from "@esmate/shadcn/components/ui/badge";
import { kavoon } from "./fonts";

const mainMenuItems: { text: string; href: string }[] = [
  {
    text: "Home",
    href: "/",
  },
  {
    text: "Store",
    href: "/store",
  },
  {
    text: "About",
    href: "/about",
  },
];

export function Actions() {
  const { totalQuantity } = useCart();

  return (
      <div className="actions">
        <div>
          <Link href="/" className="-m-1.5 p-1.5">
            <span className="sr-only">Next Shopify Storefront</span>
            <Search className="h-6 w-6" />
          </Link>
        </div>
        <div>
          <Link href="/" className="-m-1.5 p-1.5">
            <span className="sr-only">Next Shopify Storefront</span>
            <UserRound className="h-6 w-6" />
          </Link>{" "}
        </div>
        <Link href="/cart" className="relative">
          <span className="sr-only">Cart</span>
          <ShoppingCart className="h-6 w-6" />
          {!!totalQuantity && (
            <Badge
              variant="destructive"
              className="absolute -top-2 -right-2 h-5 min-w-5 rounded-full px-1 text-xs font-bold"
            >
              {totalQuantity}
            </Badge>
          )}
        </Link>
      </div>
    );

}

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();

  function isMenuItemActive(href: string) {
    const url = new URL(`https://x${href}`);
    return pathname.startsWith(url.pathname);
  }

  return (
    <header>
      <div className="superheader">
        {/* <div class="inner-div superheader-row">
            <div class="superheader-callout">
                Call to Action! Something Is Happening!
            </div>
            <div class="login-button">Login</div>
        </div> */}
      </div>
      <div className="inner-div header-row">
        <div className="header-left">
          <div>
            <Image
              width={164}
              height={64}
              className="logo"
              alt="Honey Scamps"
              src="/img/honeyscamp-logo-and-name.png"
            />
          </div>
        </div>
        <div className="header-right mobile-only">
          <Actions />
          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
            <SheetTrigger asChild className="lg:hidden">
              <Button variant="ghost" size="icon">
                <span className="sr-only">Open main menu</span>
                <Menu className="h-6 w-6" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-full sm:max-w-sm">
              <div className="flex flex-col gap-6 pt-6">
                {mainMenuItems.map(({ text, href }) => (
                  <Link
                    className={`rounded-lg px-3 py-2 text-base font-semibold transition-colors hover:bg-accent ${
                      isMenuItemActive(href) ? "text-primary" : "text-foreground"
                    }`}
                    key={href}
                    href={href}
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {text}
                  </Link>
                ))}
              </div>
            </SheetContent>
          </Sheet>
        </div>
        <div className="header-right not-mobile">
          <nav className={kavoon.className}>
            <ul className="header-nav">
              {mainMenuItems.map(({ text, href }) => (
                <li key={href}>
                  <Link className={`${isMenuItemActive(href) ? "menu-item-active" : "menu-item-inactive"}`} href={href}>
                    {text}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
          <Actions />
        </div>
      </div>
    </header>
  );
}