"use client";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { CreateUsuario } from "@/app/api/usuarios/route";
import { useToast } from "@/components/ui/use-toast";
import { useRouter } from "next/navigation";
import { useMutation, useQuery } from "@tanstack/react-query";
import { UsuarioI, UsuarioLogadoI } from "@/interfaces/usuario/interface";
import { GetEquipamentosAll } from "@/app/api/situacao/routes";

const formSchema = z.object({
  nome: z.string().refine((val) => val.length >= 3, {
    message: "Tem que ter no minimo 3 caracteres",
  }),
  email: z.string().refine((val) => val.length >= 5, {
    message: "Term no minimo 5 caracteres",
  }),
  senha: z.string().refine((val) => val.length >= 3, {
    message: "Term no minimo 3 caracteres",
  }),
  telefone: z.string().refine((val) => val.length >= 3, {
    message: "Term no minimo 3 caracteres",
  }),
});

type FormData = z.infer<typeof formSchema>;

interface NovoUsuarioProps {
  usuario: UsuarioLogadoI;
}

function NewUsuario({ usuario }: NovoUsuarioProps) {
  const { toast } = useToast();
  const router = useRouter();
  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm<FormData>({
    mode: "onBlur",
    resolver: zodResolver(formSchema),
  });

  const mutation = useMutation({
    mutationFn: (data: FormData) => {
      return CreateUsuario(usuario, data).then((response) => response);
    },
    onError: (error) => {
      toast({
        title: error.message,
      });
    },
    onSuccess: (data) => {
      if (data.error) {
        toast({
          variant: "destructive",
          title: data.error,
        });
      } else {
        toast({
          title: "Usuario cadastrado com sucesso",
        });
        router.push("/usuarios");
      }
    },
  });
  const onSubmit = async (data: FormData) => {
    mutation.mutate(data);
  };

  return (
    <>
      <div className="flex  items-center justify-center  p-4 w-full">
        <form onSubmit={handleSubmit(onSubmit)} className=" w-5/6">
          <div className="">
            <div className="mb-7 ">
              <p className="font-bold mb-2 ">Nome</p>
              <Input type="text" {...register("nome")} placeholder="nome" />
              {errors.nome?.message && <p>{errors.nome?.message}</p>}
            </div>

            <div className="mb-7">
              <p className="font-bold mb-2 ">Email</p>
              <Input type="email" {...register("email")} placeholder="email" />
              {errors.email?.message && <p>{errors.email?.message}</p>}
            </div>

            <div className="mb-7">
              <p className="font-bold mb-2 ">Telefone</p>
              <Input
                type="telefone"
                {...register("telefone")}
                placeholder="telefone"
              />
              {errors.telefone?.message && <p>{errors.telefone?.message}</p>}
            </div>

            <div className="mb-7">
              <p className="font-bold mb-2 ">Senha</p>
              <Input
                type="password"
                {...register("senha")}
                placeholder="senha"
              />
              {errors.senha?.message && <p>{errors.senha?.message}</p>}
            </div>
          </div>

          <Button className="text-white font-bold">Cadastrar</Button>
        </form>
      </div>
    </>
  );
}

export default NewUsuario;