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 { useState } from "react";
import { trpc } from "@/app/_trpc/client";

export function DialogCreateMaterials() {
  const utils = trpc.useUtils()
  const [open, setOpen] = useState<boolean>(false);
  const{mutate:createMaterial,isPending}=trpc.materials.createMaterial.useMutation({
    onSuccess:()=>{
      setOpen(false);
      utils.projects.getAllProjectMaterials.invalidate()
    }
  })
  
  const handleCreateMaterial=(formData:FormData)=>{
    const name = formData.get('name') as string
    const price = formData.get('price') as string
    const brand = formData.get('company') as string
    createMaterial({name,price,brand})
  }
  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 material</DialogTitle>
          <DialogDescription>
            Asigna los materiales a tus empleados aqui.
          </DialogDescription>
        </DialogHeader>

        <form action={handleCreateMaterial}>
          <div className="space-y-5">
            <div className="">
              <Label
                htmlFor='name'
                className="text-right capitalize"
              >
                Nombre
              </Label>
              <Input
                id='name'
                name="name"
                type="text"
                placeholder="ej: tijeras"
                required
              />
            </div>
            <div className="">
              <Label
                htmlFor='price'
                className="text-right capitalize"
            
              >
                Precio
              </Label>
              <Input
                id='price'
                name="price"
                type="number"
                placeholder="ej: 3,200"
                min={1}
                defaultValue={1}
                required
              />
            </div>
            <div className="">
              <Label
                htmlFor='company'
                className="text-right capitalize"
            
              >
                Compañia
              </Label>
              <Input
                id='company'
                name="company"
                type="test"
                placeholder="ej: trojan"
              />
            </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>
  );
}