"use client";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { usePermission } from "@/utils/auth/permission";
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 { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import DropdownList from "../common/Dropdown";
import { Datepicker, InputField, Select, Textarea } from "../forms/Inputs";
import { TSexpenseSchema, expenseSchema } from "../forms/schema/expense";
import { useParseError } from "@/utils/lib/helpers";

type Props = {
  expense?: TSexpenseSchema;
  mode?: string;
  isOpen: boolean;
  setOpen?: (x: boolean) => void;
};

const ExpenseForm: FC<Props> = ({
  expense,
  isOpen,
  setOpen = () => { },
  mode = "create",
}) => {
  const queryClient = useQueryClient();
  const [category, setCategory] = useState(1);
  const expenseApproval = usePermission("expenses.approval");
  const storeForm = useForm<TSexpenseSchema>({
    resolver: zodResolver(expenseSchema),
    mode: "onChange",
    defaultValues: expense as TSexpenseSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

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

  const {
    mutate: submitExpense,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (storeData: TSexpenseSchema) => {
      const api_url =
        mode === "create" ? `/api/expenses` : `/api/expenses/${expense?.id}`;
      const method = mode === "create" ? "post" : "put";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: storeData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      setOpen(false);
      queryClient.invalidateQueries({ queryKey: ["expenses"] });
      toast.success(`Expense ${mode} successfully!`);
      reset();
    },
    onError: (error: any) => {
      toast.error(useParseError(error));
    },
  });
  const onSubmit = async (data: TSexpenseSchema) => {
    console.log(data);
    submitExpense(data);
  };

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

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      <Modal onClose={() => setOpen(false)} show={isOpen} size={"3xl"}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          {mode === "create" ? (
            <p className="font-normal">Add new expense</p>
          ) : (
            <p className="font-normal">Edit expense</p>
          )}
        </Modal.Header>
        <Modal.Body>
          <FormProvider {...storeForm}>
            <form onSubmit={handleSubmit(onSubmit, onError)}>
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div className="left">
                  <div className="mt-1">
                    <InputField
                      name="amount"
                      labelText="Amount"
                      mandatory={true}
                      placeholder="Amount"
                      errors={errors}
                    />
                  </div>
                  <div className="mt-1">
                    <label
                      htmlFor="vendor"
                      className="block mt-1 mb-1 dark:text-gray-200"
                    >
                      Expense By
                    </label>
                    <DropdownList
                      name="staff"
                      idName="staff_id"
                      getLabel={(staff: any) => staff?.name}
                      defaultItems={expense?.staff}
                      isMulti={false}
                    />
                  </div>
                  <div className="mt-1">
                    <label
                      htmlFor="vendor"
                      className="block mt-1 mb-1 dark:text-gray-200"
                    >
                      Payment Method (Fund)
                    </label>
                    <DropdownList
                      name="fund"
                      idName="fund_id"
                      getLabel={(fund: any) => fund?.name}
                      defaultItems={expense?.fund}
                      isMulti={false}
                    />
                  </div>
                  <div className="mt-1">
                    <InputField
                      name="voucher"
                      labelText="Voucher"
                      placeholder="Voucher"
                      errors={errors}
                    />
                  </div>
                </div>
                <div className="right">
                  {/* <div className="mt-1">
                    <label
                      htmlFor="vendor"
                      className="block mt-1 mb-1 dark:text-gray-200"
                    >
                      Expense Category
                    </label>
                    <DropdownList
                      name="expense_categorie"
                      idName="expense_category_id"
                      getLabel={(category: any) => category?.name}
                      placeholder="Category"
                      defaultItems={expense?.expense_category}
                      isMulti={false}
                    />
                  </div> */}
                  {category === 3 && (
                    <div className="mt-1">
                      <label
                        htmlFor="vendor"
                        className="block mb-1 dark:text-gray-200"
                      >
                        Vendor
                      </label>
                      <DropdownList
                        name="vendor"
                        idName="vendor_id"
                        getLabel={(vendor: any) => vendor?.name}
                        defaultItems={expense?.vendor}
                        isMulti={false}
                      />
                    </div>
                  )}
                  <div className="mt-1">
                    <label
                      htmlFor="vendor"
                      className="block mt-1 mb-1 dark:text-gray-200"
                    >
                      Expense Type
                    </label>
                    <DropdownList
                      name="expense_type"
                      idName="expense_type_id"
                      getLabel={(expenseType: any) => expenseType?.name}
                      defaultItems={expense?.expenseType}
                      isMulti={false}
                      placeholder="Expense Type"
                    />
                  </div>
                  <div className="mt-2">
                    <label
                      htmlFor="vendor"
                      className="block mt-1 mb-1 dark:text-gray-200"
                    >
                      Zone
                    </label>
                    <DropdownList
                      name="zone"
                      idName="zone_id"
                      getLabel={(zone: any) => zone?.name}
                      defaultItems={expense?.zone}
                      isMulti={false}
                      placeholder="Zone"
                    />
                  </div>
                  <div className="mt-1">
                    <Datepicker
                      name="expense_date"
                      labelText="Expense Date"
                      defaultDate={expense?.expense_date}
                    />
                  </div>
                  {expenseApproval && (
                    <div className="mt-1">
                      <Select
                        defaultValue={"pending"}
                        options={[
                          { value: "approved", label: "Approved" },
                          { value: "pending", label: "Pending" },
                          { value: "declined", label: "Declined" },
                        ]}
                        labelText="Status"
                        name="status"
                        errors={errors}
                      />
                    </div>
                  )}
                </div>
              </div>
              <div className="mt-3">
                <Textarea
                  labelText="Note"
                  name="note"
                  placeholder="Note"
                  rows={2}
                />
              </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 ExpenseForm;