"use client";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Plus } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import DatePicker from "./date-picker";
import { Checkbox } from "@/components/ui/checkbox";
import ModelPicker from "./model-picker";

const AddRegistratoreDialog = ({ id }: { id: Number }) => {
  //const [nome, setNome] = useState("");
  const [openData, setOpenData] = useState(false);
  const [openModello, setOpenModello] = useState(false);
  const [data, setData] = useState<Date | undefined>();
  const [seriale, setSeriale] = useState<string>("");
  const [modello, setModello] = useState<Date | undefined>();
  const [fattura, setFattura] = useState<Boolean>();

  const modelli = [
    {
      value: "FORM100",
      label: "Form 100",
    },
    {
      value: "FORM200",
      label: "Form 200",
    },
    {
      value: "FORM200PLUS",
      label: "Form 200 Plus",
    },
    {
      value: "FORM500",
      label: "Form 500",
    },
  ];

  return (
    <div>
      <Dialog>
        <form className="z-10">
          <Tooltip>
            <TooltipTrigger asChild>
              <DialogTrigger asChild>
                <Button variant="outline" type="button">
                  <Plus className="size-4" />
                </Button>
              </DialogTrigger>
            </TooltipTrigger>
            <TooltipContent>
              <p>Aggiungi registratore</p>
            </TooltipContent>
          </Tooltip>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Aggiungi registratore</DialogTitle>
            </DialogHeader>
            <div className="grid gap-4">
              <div className="grid gap-3">
                <Label htmlFor="seriale">Seriale</Label>
                <Input
                  id="seriale"
                  name="seriale"
                  placeholder="Seriale"
                  onChange={(e) => setSeriale(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="date">Data di acquisto</Label>
                <DatePicker
                  open={openData}
                  setOpen={setOpenData}
                  date={data}
                  setDate={setData}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="lavoro">Modello</Label>
                <ModelPicker
                  open={openModello}
                  setOpen={setOpenModello}
                  value={modello}
                  setValue={setModello}
                  modelli={modelli}
                />
              </div>
            </div>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="outline">Cancella</Button>
              </DialogClose>
              <Button
                onClick={async () =>
                  await fetch("/api/registratori", {
                    method: "POST",
                    body: JSON.stringify({
                      id: id,
                      seriale: seriale,
                      data: data,
                      modello: modello,
                    }),
                  })
                }
                type="submit"
              >
                Aggiungi
              </Button>
            </DialogFooter>
          </DialogContent>
        </form>
      </Dialog>
    </div>
  );
};

export default AddRegistratoreDialog;