"use client";
import { User } from "@/interfaces/User";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Spinner } from "flowbite-react";
import { FC, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { HiPlus } from "react-icons/hi";
import { MdEditSquare } from "react-icons/md";
import { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import { InputField } from "../forms/Inputs";
import { TSroleSchema, roleSchema } from "../forms/schema/role";
type Props = {
  role?: TSroleSchema;
  mode?: string;
};

const RoleForm: FC<Props> = ({ role, mode = "create" }) => {
  const queryClient = useQueryClient();
  const [isOpen, setOpen] = useState(false);
  const roleForm = useForm<TSroleSchema>({
    resolver: zodResolver(roleSchema),
    mode: "onChange",
    defaultValues: role as TSroleSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    reset,
    control,
    formState: { errors },
  } = roleForm;

  const {
    mutate: submitRole,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (roleData: TSroleSchema) => {
      const api_url =
        mode === "create" ? `/api/roles` : `/api/roles/${role?.id}`;
      const method = mode === "create" ? "post" : "put";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: roleData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      setOpen(false);
      setTimeout(() => {
        queryClient.invalidateQueries({ queryKey: ["roles"] });
      }, 1000);
      toast.success(`Role ${mode} successful!`);
    },
    onError: (error: any) => {
      let messages = error?.response?.data?.error?.message;
      if (messages && messages.includes("already exists")) {
        toast.error(`Role  already exist`);
      } else {
        toast.error(`Unable to create role, Please try again later!`);
      }
      setOpen(false);
    },
  });
  const onSubmit = async (data: TSroleSchema) => {
    submitRole(data);
    reset();
  };

  return (
    <>
      <div className="flex items-center gap-x-2">
        {mode === "create" ? (
          <>
            <Button
              color="blue"
              className="p-0 dark:!bg-gray-800"
              size="sm"
              onClick={() => setOpen(true)}
            >
              <HiPlus className="text-xl" />
              Add
            </Button>
          </>
        ) : (
          <Button
            className="bg-gray-50 hover:!bg-gray-300"
            size="xs"
            onClick={() => setOpen(true)}
          >
            <MdEditSquare className="text-lg dark:text-gray-200 text-blue-600" />
          </Button>
        )}
      </div>
      <Modal onClose={() => setOpen(false)} show={isOpen}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          <p className="font-medium">Update role</p>
        </Modal.Header>
        <Modal.Body>
          <FormProvider {...roleForm}>
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                  <div className="mt-1">
                    <InputField
                      labelText="Role"
                      name="name"
                      placeholder="Role Name"
                      errors={errors}
                    />
                  </div>
                </div>
              </div>
              <input className="opacity-0" type="submit" ref={inputRef} />
            </form>
          </FormProvider>
        </Modal.Body>
        <Modal.Footer>
          <Button color="blue" onClick={() => inputRef.current?.click()}>
            {isPending && (
              <Spinner aria-label="Spinner button example" size="sm" />
            )}
            Submit
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default RoleForm;