"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 { LangToggle } from "./lang-toggle";
import { ThemeSwitch } from "./theme-toggle";

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 dark:border-muted-foreground/15">
			<div className="mx-auto flex h-14 w-full items-center gap-2 pr-3 pl-4 md:pr-4 md:pl-5">
				<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">
						<LangToggle />
						<ThemeSwitch />
					</div>
					<UserHeaderSection
						key={pathname}
						open={openUserMenu}
						setOpen={handleOpenMenu}
						setSidebar={handleOpenSidebar}
					/>
				</div>
			</div>
		</header>
	);
}
