"use client";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { useRouter } from "next/navigation";
import { FC, useEffect } from "react";
import { Control, FormProvider, useForm, useWatch } from "react-hook-form";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import DropdownList from "../common/Dropdown";
import { Datepicker, InputField } from "../forms/Inputs";
import { TSproductInSchema, productInSchema } from "../forms/schema/product-in";
import ProductExpenseForm from "./product-expense-form";
import ProductRowForm from "./product-row-form";
import { useParseError } from "@/utils/lib/helpers";

const ProductInForm: FC = () => {
  const route = useRouter();
  const defaultProduct = {
    product_id: 0,
    brand: null,
    unit: null,
    quantity: 0,
    unit_price: 0,
    unit_sell_price: 0,
    vat: 0,
    status: "new",
    total_price: 0,
    has_serial: 0,
    fiber_meter_start: null,
    fiber_meter_end: null,
    fiberID: null,
    serial: [],
    product_category_id: 1,
  };

  const storeForm = useForm<TSproductInSchema>({
    resolver: zodResolver(productInSchema),
    mode: "onChange",
    defaultValues: {
      product: [defaultProduct],
    },
  });

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

  const {
    mutate: submitProduct,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (storeData: TSproductInSchema) => {
      const { data } = await axios({
        method: "post",
        url: `/api/product-ins`,
        data: storeData,
      });
      return data?.data;
    },
    onSuccess: (data) => {
      route.push("/products");
      toast.success("Product IN Successful!");
      //reset();
    },
    onError: (error: any) => {
      toast.error(useParseError(error))
    },
  });
  const onSubmit = async (data: TSproductInSchema) => {
    console.log(data);
    submitProduct(data);
  };

  const onError = async (data: any) => {
    console.log("error", data, 'asdfsadf');
  };

  useEffect(() => {
    const { unsubscribe } = watch((value, items) => {
      if (
        items.name?.startsWith("product") &&
        (items.name?.endsWith("unit_price") ||
          items.name?.endsWith("quantity") ||
          items.name?.endsWith("vat"))
      ) {
        const index = parseInt(items.name.split(".")[1]);
        const price = value.product?.at(index)?.unit_price;
        const quantity = value.product?.at(index)?.quantity;
        const vat = value.product?.at(index)?.vat ?? 0;
        if (price && quantity) {
          let total = price * quantity;
          if (vat > 0) {
            total = total + (total / 100) * vat;
          }
          setValue(`product.${index}.total_price`, total);
        }
      }
    });
    return () => unsubscribe();
  }, [watch]);

  const TotalAmount = ({
    control,
  }: {
    control: Control<TSproductInSchema>;
  }) => {
    const productValues = useWatch({
      control,
      name: "product",
    });
    const total: number = productValues.reduce(
      (acc, item) =>
        acc + (Number.isNaN(item.total_price) ? 0 : item.total_price),
      0
    );
    setValue("expense.amount", total);
    return <p className="dark:text-gray-200">Total:{total}</p>;
  };
  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      <div className="p-1 pt-0">
        <FormProvider {...storeForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1 py-2 pb-10 bg-white dark:bg-gray-800 dark:text-gray-200">
              <div className="expense">
                <div className="grid gap-6 grid-cols-2">
                  <div>
                    <label htmlFor="" className="mb-2 block">
                      Staff
                    </label>
                    <DropdownList
                      idName="purchase_by"
                      name="staff"
                      getLabel={(staff) => staff?.name}
                      isMulti={false}
                      placeholder="Purchasers"
                    />
                  </div>
                  <div>
                    <Datepicker
                      name="purchase_date"
                      labelText="Purchase Date"
                    />
                  </div>
                </div>
                <div className=" mt-2 rounded-md">
                  <ProductExpenseForm />
                </div>
              </div>
            </div>
            <div>
              <hr className="dark:border-gray-500" />
            </div>
            <div className="px-5 py-2 bg-white mt-0 grid grid-cols-1 md:grid-cols-2 gap-4 dark:bg-gray-800 dark:border-gray-500">
              <div>
                <InputField
                  labelText="Voucher"
                  name="voucher"
                  placeholder="EX:A3X5DA / No voucher"
                  errors={errors}
                />
              </div>
              <div>
                <InputField
                  labelText="Product Note"
                  name="note"
                  placeholder="Notes"
                />
              </div>
            </div>
            <ProductRowForm defaultProduct={defaultProduct as any} />
            <div className="flex justify-end border-b">
              <div className="p-5 mr-14">
                <TotalAmount control={control} />
              </div>
            </div>
            <div className="flex justify-end mt-5 mb-10">
              <ActionButton type="submit" isLoading={isPending} />
            </div>
          </form>
        </FormProvider>
      </div>
    </>
  );
};

export default ProductInForm;