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 React, { useState } from "react";
import { trpc } from "@/app/_trpc/client";
import { SelectedTool } from "../types";
import { useToast } from "@/components/ui/use-toast";

export function DialogUpdateTools({
  selectedTools,
  setSelectedTools,
}: {
  selectedTools: SelectedTool[];
  setSelectedTools: React.Dispatch<React.SetStateAction<SelectedTool[]>>;
}) {
  const utils = trpc.useUtils();
  const [open, setOpen] = useState<boolean>(false);
  const {toast}=useToast()

  const { mutate: updateTools, isPending } = trpc.tools.updateTools.useMutation(
    {
      onSuccess: () => {
        setOpen(false);
        utils.tools.getTools.invalidate();
      },
      onError:(err)=>{
        toast({
          title:'Error',
          description:'Error al modificar herramienta',
          variant:'destructive'
        })
      }
    }
  );

  const handleUpdateMaterials = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const tools = selectedTools?.map(({ id, name, quantity,inStock }) => ({
      id,
      quantity:quantity || inStock,
      name,
    }));
    updateTools({ tools });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild className="w-full">
        <Button size="sm" className="w-full " variant="outline" disabled={selectedTools.length <= 0}>
          Modificar
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Actualizar materiales</DialogTitle>
          <DialogDescription>
            Modifica los materiales en tu inventario aqui.
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleUpdateMaterials}>
          {selectedTools &&
            selectedTools.map((tool) => {
              return (
                <div key={tool?.id} className="flex flex-col  py-4">
                  <div className="grid grid-cols-4 items-center gap-4 mb-1">
                    <Label
                      htmlFor={`${tool}-${tool.id}`}
                      className="text-right capitalize"
                    >
                      Nombre
                    </Label>
                    <Input
                      id={`${tool}-${tool.id}`}
                      name="name"
                      type="text"
                      min={0}
                      defaultValue={tool?.name}
                      className="col-span-3"
                      onChange={(e) => {
                        setSelectedTools((prev) => {
                          return prev.map((item) => {
                            if (item.id === tool.id) {
                              const updatedItem = item;
                              updatedItem.name = e.target.value;
                              return updatedItem;
                            }
                            return item;
                          });
                        });
                      }}
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4 ">
                    <Label
                      htmlFor={`${tool}-${tool.id}`}
                      className="text-right capitalize"
                    >
                      Cantidad
                    </Label>
                    <Input
                      id={`${tool}-${tool.id}`}
                      name="quantity"
                      type="number"
                      min={tool?.inStock || 1}
                      defaultValue={tool?.inStock}
                      className="col-span-3"
                      onChange={(e) => {
                        setSelectedTools((prev) => {
                          return prev.map((item) => {
                            if (item.id === tool.id) {
                              const updatedItem = item;
                              updatedItem.quantity = parseInt(e.target.value)
                              return updatedItem;
                            }
                            return item;
                          });
                        });
                      }}
                    />
                  </div>
                </div>
              );
            })}

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