"use client";
import { usePathname } from "next/navigation";
import { MainNav } from "~/components/navbar/main-nav";
import { MobileNav } from "~/components/navbar/mobile-nav";
import { useState } from "react";
import { UserHeaderSection } from "~/components/navbar/login-button";
import { SettingsPopover } from "~/components/navbar/settings-modal";
import { RicercaCommand } from "~/components/navbar/ricerca_command";

export function SiteHeader() {
  const pathname = usePathname();
  const [openSidebar, setOpenSidebar] = useState(false);
  const [openUserMenu, setOpenUserMenu] = useState(false);
  const [openUserMenuSidebar, setOpenUserMenuSidebar] = useState(false);

  const handleOpenMenu = (status: boolean) => {
    setOpenUserMenu(status);
  };

  const handleOpenSidebar = (status: boolean) => {
    setOpenSidebar(status);
  };
  return (
    <header className="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur">
      <div className="mx-auto flex h-14 w-full items-center pr-3 pl-4 md:pr-4 md:pl-8">
        <MainNav pathname={pathname} />
        <MobileNav
          pathname={pathname}
          open={openSidebar}
          setOpen={setOpenSidebar}
          userOpen={openUserMenuSidebar}
          setUserOpen={setOpenUserMenuSidebar}
        />

        <div className="float-end flex flex-1 items-center justify-end gap-0.5">
          <RicercaCommand />

          <div className="hidden md:block">
            <SettingsPopover />
          </div>
          <UserHeaderSection
            key={pathname}
            open={openUserMenu}
            setOpen={handleOpenMenu}
            setSidebar={handleOpenSidebar}
          />
        </div>
      </div>
    </header>
  );
}
