"use client";

import { Search } from "lucide-react";

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

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