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

import { trpc } from "@/app/_trpc/client";

export function DialogCreateTools() {
  const [open, setOpen] = useState(false);
  const utils=trpc.useUtils()
  const {mutate:createTool,isPending}=trpc.tools.createTool.useMutation({
    onSuccess:()=>{
      utils.tools.getTools.invalidate()
      setOpen(false)
    }
  })

  const handlecreateTool =(formData:FormData)=>{
    const name = formData.get('name') as string
    const quantity = formData.get('quantity') as string
    createTool({name,quantity})
  }
  
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="bg-primary  text-white" >
          Crear
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Crear herramienta</DialogTitle>
          <DialogDescription>
            Asigna los materiales a tus empleados aqui.
          </DialogDescription>
        </DialogHeader>

        <form action={handlecreateTool}>
          <div className="space-y-5">
            <div className="">
              <Label
                htmlFor='name'
                className="text-right capitalize"
              >
                Nombre
              </Label>
              <Input
                id='name'
                name="name"
                type="text"
                required
                placeholder="ej: tijeras"
              />
            </div>
            <div className="">
              <Label
                htmlFor='quantity'
                className="text-right capitalize"
            
              >
                Cantidad
              </Label>
              <Input
                id='quantity'
                name="quantity"
                type="number"
                min={1}
                defaultValue={1}
              />
            </div>

          
          </div>

          <DialogFooter className="mt-3">
            <Button type="submit" className="bg-blue-800 text-white " disabled={isPending}>
              {isPending ? <span>Guardando</span> : <span>Guardar</span>}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}