import { useParseFloat } from "@/utils/lib/helpers";
import { FC, useEffect } from "react";
import { useFieldArray, useFormContext } from "react-hook-form";
import { HiMinus, HiPlus } from "react-icons/hi";
import { InputField } from "../forms/Inputs";
import { twMerge } from "tailwind-merge";

type props = {
  defaultInvoice: any;
};
const InvoiceLineForm: FC<props> = ({ defaultInvoice }) => {
  const {
    control,
    setValue,
    getValues,
    watch,
    formState: { errors = {} as any },
  } = useFormContext();

  const { fields, remove, insert } = useFieldArray({
    name: "lines",
    control,
  });

  useEffect(() => {
    const { unsubscribe } = watch((value, { name, type }) => {
      const lines = value?.lines;
      if (lines === undefined || !lines) return;
      const field: string[] = name?.split(".") ?? [];

      if (
        field[2] === "amount" ||
        field[2] === "quantity" ||
        field[2] === "discount"
      ) {
        const index: number = useParseFloat(field[1]);
        const amount: number = useParseFloat(lines?.[index]?.["amount"]);
        const quantity: number = useParseFloat(lines?.[index]?.["quantity"]);
        const discount: number = useParseFloat(lines?.[index]?.["discount"]);
        const gross_total: number = amount * quantity;
        //const total_amount: number = gross_total - discount;
        const total_amount: number = gross_total;
        setValue(`lines.${index}.total_amount`, total_amount);
      }
    });
    return () => unsubscribe();
  }, [watch]);

  return (
    <>
      <div className="mt-5 pr-5">
        <div className="grid grid-cols-1 md:grid-cols-6 border-t border-r border-l">
          <div className="md:col-span-2 col-span-1">
            <div className="text-center font-medium block text-sm p-1">
              Description
            </div>
          </div>
          <div className="border-l text-center font-medium col-span-1 text-sm p-1">
            Amount
          </div>
          <div className="border-l text-center font-medium p-1 text-sm">
            Quantity
          </div>
          <div className="border-l text-center font-medium p-1 text-sm">
            Discount
          </div>
          <div className="border-l text-center font-medium p-1 text-sm">
            Total Amount
          </div>
        </div>
        {fields.map((field: any, index) => (
          <div key={field.id} className={twMerge(index === 0 && "border-t")}>
            <div className="relative flex" key={field.id}>
              <div className="grid  grid-cols-1 md:grid-cols-6 w-full">
                <div className="border-b border-l p-1 col-span-1 md:col-span-2">
                  <InputField
                    name={`lines.${index}.description`}
                    placeholder="Description"
                    errors={errors}
                  />
                </div>
                <div className="border-b border-l p-1">
                  <InputField
                    name={`lines.${index}.amount`}
                    placeholder="Amount"
                    errors={errors}
                  />
                </div>
                <div className="border-b border-l p-1">
                  <InputField
                    name={`lines.${index}.quantity`}
                    placeholder="Quantity"
                    errors={errors}
                  />
                </div>
                <div className="border-b border-l p-1">
                  <InputField
                    inputType="number"
                    name={`lines.${index}.discount`}
                    placeholder="Discount"
                    errors={errors}
                  />
                </div>
                <div className="border-b border-l border-r p-1">
                  <InputField
                    inputType="number"
                    name={`lines.${index}.total_amount`}
                    placeholder="Total Amount"
                    readonly={true}
                    errors={errors}
                  />
                </div>
              </div>
              <div className="plus-minus">
                <div className="absolute -right-6 top-2">
                  {index > 0 ? (
                    <div
                      className="border h-[20px] cursor-pointer bg-red-600 mt-1"
                      onClick={() => remove(index)}
                    >
                      <HiMinus className="text-xl text-white" />
                    </div>
                  ) : (
                    <div className="border h-[22px] bg-red-300 mt-1">
                      <HiMinus className="text-xl text-gray-300" />
                    </div>
                  )}
                  <div
                    className="border h-[22px] cursor-pointer bg-green-600"
                    onClick={() => insert(index + 1, defaultInvoice)}
                  >
                    <HiPlus className="text-xl text-white" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};
export default InvoiceLineForm;