'use client'
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { SheetFooter } from "@/components/ui/sheet";
import useFormHandler from "@/hooks/useFormHandler";
import { userInvitation } from "@/lib/schemas/userSchema";
import { z } from "zod";
import useSendInvitationUser from "../hooks/useSendInvitationUser";
import { useEffect, useState } from "react";

export default function SendInvitationModal() {
  const defaultValues: z.infer<typeof userInvitation> = {
    emailAddress: "",
    rol:'moderator'
  };
  const [open,setOpen]=useState<boolean>(false)
  const { form, isInputChanged, setIsInputChanged } =
    useFormHandler(userInvitation, defaultValues);

  const { sendInvitationMutation, isPending,isSuccess } = useSendInvitationUser();

  useEffect(()=>{
    if(isSuccess){
      setOpen(false)
    }
  },[isSuccess])
  const handleSubmit = (values: z.infer<typeof userInvitation>) => {
    sendInvitationMutation(values);
  };
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" className="rounded-2xl">Enviar invitation</Button>
      </DialogTrigger>
      <DialogContent className="max-w-[400px]">
        <DialogHeader>
          <DialogTitle>Invitar a usuario</DialogTitle>
          <DialogDescription>
            El usuario recibira un correo de confirmacion, una vez lo acepte, se mostrara en tu cuenta.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form
            className="space-y-5 "
            onSubmit={form.handleSubmit(handleSubmit)}
          >
            <FormField
              control={form.control}
              name="emailAddress"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Correo</FormLabel>
                  <FormControl>
                    <Input placeholder="ej: correo@email.com" {...field} />
                  </FormControl>

                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="rol"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Rol</FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={field.value!}
                    name="rol"
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona el rol del usuario" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="admin">admin</SelectItem>
                      <SelectItem value="moderator">moderator</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <SheetFooter>
              <Button disabled={!isInputChanged || isPending} type="submit">
                {isPending ? "Guardando cambios" : "Guardar cambios"}
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}