"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 { useEffect, useState } from "react";
import DatePicker from "./date-picker";
import { Checkbox } from "@/components/ui/checkbox";

const AddInterventoDialog = ({ id }: { id: string }) => {
  //const [nome, setNome] = useState("");
  const [open, setOpen] = useState(false);
  const [data, setData] = useState<Date | undefined>(new Date());
  const [lavoro, setLavoro] = useState<string>("");
  const [fattura, setFattura] = useState<Boolean>(false);

  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 intervento</p>
            </TooltipContent>
          </Tooltip>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Aggiungi intervento</DialogTitle>
              {/*<DialogDescription>
                Make changes to your profile here. Click save when you&apos;re
                done.
              </DialogDescription>*/}
            </DialogHeader>
            <div className="grid gap-4">
              <div className="grid gap-3">
                <Label htmlFor="date">Data</Label>
                <DatePicker
                  open={open}
                  setOpen={setOpen}
                  date={data}
                  setDate={setData}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="lavoro">Lavoro</Label>
                <Input
                  id="lavoro"
                  name="lavoro"
                  placeholder="Lavoro eseguito..."
                  onChange={(e) => setLavoro(e.target.value)}
                />
              </div>
              <div className="gap-3 flex items-center mt-2">
                <Checkbox
                  id="fattura"
                  onCheckedChange={(checked) => {
                    checked === "indeterminate"
                      ? setFattura(false)
                      : checked
                        ? setFattura(true)
                        : setFattura(false);
                  }}
                />
                <Label htmlFor="fattura">Fattura</Label>
              </div>
            </div>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="outline">Cancella</Button>
              </DialogClose>
              <Button
                onClick={async () =>
                  await fetch("/api/interventi", {
                    method: "POST",
                    body: JSON.stringify({
                      id: id,
                      data: data,
                      fattura: fattura,
                      lavoro: lavoro,
                    }),
                  })
                }
                type="submit"
              >
                Aggiungi
              </Button>
            </DialogFooter>
          </DialogContent>
        </form>
      </Dialog>
    </div>
  );
};

export default AddInterventoDialog;
