"use client";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { useState } from "react";

const AddClientDialog = () => {
  const [open, setOpen] = useState<Boolean>(false);
  const [nome, setNome] = useState("");
  const [ragione_sociale, setRagione_sociale] = useState("");
  const [partita_iva, setPartita_iva] = useState("");
  const [telefono, setTelefono] = useState("");
  const [email, setEmail] = useState("");
  const [sede, setSede] = useState("");
  const [sede_url, setSede_url] = useState("");
  const [contratto, setContratto] = useState("");

  return (
    <div>
      <Dialog open={open} onOpenChange={setOpen}>
        <form className="z-10">
          <DialogTrigger asChild>
            <Button variant="outline">Aggiungi cliente</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Aggiungi cliente</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="name">Nome</Label>
                <Input
                  id="name"
                  name="name"
                  placeholder="Nome"
                  onChange={(e) => setNome(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="ragione_sociale">Ragione sociale</Label>
                <Input
                  id="ragione_sociale"
                  name="ragione_sociale"
                  placeholder="Ragione sociale"
                  onChange={(e) => setRagione_sociale(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="p_iva">Partita IVA</Label>
                <Input
                  id="p_iva"
                  name="p_iva"
                  placeholder="Partita IVA"
                  onChange={(e) => setPartita_iva(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="tel">Numero di telefono</Label>
                <Input
                  id="tel"
                  name="tel"
                  placeholder="Numero di telefono"
                  onChange={(e) => setTelefono(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="tel">Indirizzo e-mail</Label>
                <Input
                  id="mail"
                  name="mail"
                  placeholder="Indirizzo e-mail"
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="sede_desc">Sede (descrizione)</Label>
                <Input
                  id="sede_desc"
                  name="sede_desc"
                  placeholder="Sede - descrizione"
                  onChange={(e) => setSede(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="sede_link">Sede (link GMaps)</Label>
                <Input
                  id="sede_link"
                  name="sede_link"
                  placeholder="Sede - link"
                  onChange={(e) => setSede_url(e.target.value)}
                />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="contratto">Contratto (link)</Label>
                <Input
                  id="contratto"
                  name="contratto"
                  placeholder="Contratto - link"
                  onChange={(e) => setContratto(e.target.value)}
                />
              </div>
            </div>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="outline">Cancella</Button>
              </DialogClose>
              <Button
                onClick={async () => {
                  const res = await fetch("/api/clienti", {
                    method: "POST",
                    body: JSON.stringify({
                      nome: nome,
                      ragione_sociale: ragione_sociale,
                      partita_iva: partita_iva,
                      telefono: telefono,
                      email: email,
                      sede: sede,
                      sede_url: sede_url,
                      contratto: contratto,
                    }),
                  });

                  if (res.status == 200) {
                    setOpen(false);
                  }
                }}
                type="submit"
              >
                Aggiungi
              </Button>
            </DialogFooter>
          </DialogContent>
        </form>
      </Dialog>
    </div>
  );
};

export default AddClientDialog;
