"use client";

import { Search } from "lucide-react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { CodiceBox } from "~/components/codiceRicerca";
import { Button } from "~/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "~/components/ui/dialog";

export function RicercaCommand() {
	const [open, setOpen] = useState(false);
	const router = useRouter();
	useEffect(() => {
		router.events.on("routeChangeStart", () => {
			setOpen(false);
		});
	}, []);
	return (
		<>
			<Dialog onOpenChange={setOpen} open={open}>
				<DialogTrigger asChild>
					<Button
						aria-label="ricercaBtn"
						className="p-2"
						data-umami-event="ricerca__btmandn"
						size="sm"
						variant="outline"
					>
						<Search />
					</Button>
				</DialogTrigger>
				<DialogContent className="border-none bg-transparent **:data-[slot=dialog-close]:hidden sm:max-w-xl">
					<DialogHeader className="sr-only">
						<DialogTitle>Ricerca</DialogTitle>
						<DialogDescription>Effettua una ricerca</DialogDescription>
					</DialogHeader>
					<div className="relative mx-auto flex w-full gap-2">
						<CodiceBox
							className="rounded-none rounded-t-md border-none outline-0 outline-foreground ring-1 ring-foreground placeholder:text-center focus:ring-foreground"
							containerClassName="rounded-t-md rounded-b-none"
							inputId="command-search"
							key={"codiceBox"}
							optionBoxClassName="rounded-none rounded-b-md mt-0 border-b-0 border-x-0"
						/>
					</div>
				</DialogContent>
			</Dialog>
		</>
	);
}
