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

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="sticky top-0 z-50 w-full border-muted border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
			<div className="mx-auto flex h-14 w-full items-center pr-3 pl-4 md:pr-4 md:pl-8">
				<MainNav />
				<MobileNav
					open={openSidebar}
					pathname={pathname}
					setOpen={setOpenSidebar}
					setUserOpen={setOpenUserMenuSidebar}
					userOpen={openUserMenuSidebar}
				/>

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

					<div className="hidden w-fit items-center gap-2 md:flex">
						<SettingsPopover />
					</div>
					<UserHeaderSection
						key={pathname}
						open={openUserMenu}
						setOpen={handleOpenMenu}
						setSidebar={handleOpenSidebar}
					/>
				</div>
			</div>
		</header>
	);
}