"use client";
import ValidationError from "@/components/ValidationError";
import { postData, putData } from "@/utils/fetch";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Spinner } from "flowbite-react";
import { useRouter } from "next/navigation";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { HiPlus } from "react-icons/hi";
import { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import { InputField, Textarea } from "../forms/Inputs";
import {
  TSexpenseCategorySchema,
  expenseCategorySchema,
} from "../forms/schema/expense-category";

type Props = {
  expenseCategory?: TSexpenseCategorySchema;
  mode?: string;
};

const ExpenseCategoryForm: FC<Props> = ({
  expenseCategory,
  mode = "create",
}) => {
  const queryClient = useQueryClient();
  const route = useRouter();
  const [isOpen, setOpen] = useState(false);
  const expenseCategoryForm = useForm<TSexpenseCategorySchema>({
    resolver: zodResolver(expenseCategorySchema),
    mode: "onChange",
    defaultValues: expenseCategory as TSexpenseCategorySchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    reset,
    formState: { errors },
  } = expenseCategoryForm;

  const {
    mutate: submitExpenseCategory,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (expenseCategoryData: TSexpenseCategorySchema) => {
      if (mode === "create") {
        const data = await postData(
          `/api/v1/expense-categories`,
          expenseCategoryData as any
        );
        return data;
      } else {
        const { data } = await putData(
          `/api/v1/expense-categories/${expenseCategory?.id}`,
          expenseCategoryData as any
        );
        return data;
      }
    },
    onSuccess: (data) => {
      setOpen(false);
      reset();
      queryClient.invalidateQueries({ queryKey: ["expense-categories"] });
      handleCloseModal();
      toast.success(`Expense category ${mode} successfully!`);
    },
    onError: (error: any) => {
      setOpen(false);
      reset();
    },
  });
  const onSubmit = async (data: TSexpenseCategorySchema) => {
    console.log(data);
    submitExpenseCategory(data);
  };

  const onError = async (data: any) => {
    console.log(data);
  };

  useEffect(() => {
    if (expenseCategory) {
      setOpen(true);
    }
  }, [expenseCategory]);

  const handleCloseModal = () => {
    setOpen(false);
    route.push("/expense-categories");
  };

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      {mode === "create" && (
        <Button color="blue" onClick={() => setOpen(true)}>
          <div className="flex">
            <HiPlus className={"mr-1 mt-0.5 text-lg"} />
            <span>Add</span>
          </div>
        </Button>
      )}
      <Modal onClose={() => handleCloseModal()} show={isOpen} size={"2xl"}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          {mode === "create" ? (
            <p className="font-normal">Add expense category</p>
          ) : (
            <p className="font-normal">Edit expense category</p>
          )}
        </Modal.Header>
        <Modal.Body>
          <FormProvider {...expenseCategoryForm}>
            <form onSubmit={handleSubmit(onSubmit, onError)}>
              <div className="grid grid-cols-1">
                <div className="mt-1">
                  <InputField
                    labelText="Category Name"
                    name="name"
                    placeholder="Expense category"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <Textarea
                    labelText="Category Description"
                    name="description"
                    placeholder="Category Description"
                    errors={errors}
                    rows={2}
                  />
                </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 ExpenseCategoryForm;