"use client";
import { FC, useState } from "react";
import { Checkbox } from "../forms/Inputs";
import { useFieldArray, useFormContext } from "react-hook-form";
import { HiMinus, HiPlus } from "react-icons/hi";
import ItemsField from "./items-field";
import { Label } from "flowbite-react";
import { useParseFloat } from "@/utils/lib/helpers";

type Props = {
    salaryItems?: any
    advanceSalary?: any
};

const SalaryDeductionsRow: FC<Props> = ({ salaryItems, advanceSalary }) => {
    const [advancePay, setAdvancePay] = useState(false);
    const {
        control,
        getValues,
    } = useFormContext();
    const { fields, remove, insert, append } = useFieldArray({
        name: "salary_deductions",
        control,
    });

    const salaryAdvancePay = (checked) => {
        if (checked) {
            append({ "deductions_label": "Advance repay", "deductions_value": 0 });
            setAdvancePay(true);
        } else {
            setAdvancePay(false);
            const index = getValues("salary_deductions")?.findIndex(salary => salary?.deductions_label === "Advance repay");
            remove(index);
        }
    }


    return (
        <>
            <div className="">
                {advanceSalary > 0 && (
                    <div>
                        <div className="flex  gap-2 mb-2">
                            <Label
                                htmlFor={`advance`}
                                className="cursor-pointer"
                            >
                                <div className="capitalize font-normal text-gray-500">
                                    {`Advance repay`}:
                                </div>
                            </Label>
                            <div className="">
                                <Checkbox
                                    name="advance_salary"
                                    id={`advance`}
                                    checked={advancePay}
                                    onChange={(event: any) => salaryAdvancePay(event?.target?.checked)}
                                />
                            </div>
                            {advancePay && (
                                <div className="capitalize font-normal text-gray-500 text-sm mt-0.5">
                                    Total Advance: {advanceSalary}
                                </div>
                            )}
                        </div>
                    </div>

                )}

                {fields?.length === 0 && (
                    <div className="flex">
                        <div
                            className="border dark:border-gray-500  rounded-md px-2 py-2.5 cursor-pointer bg-green-600"
                            onClick={() => insert(1, salaryItems)}
                        >
                            <HiPlus className="text-xl text-white" />
                        </div>
                    </div>
                )}


                {fields.map((field: any, index) => (
                    <div className="flex gap-4" key={field.id}>
                        <ItemsField index={index} option={'deductions'} />
                        <div className="flex gap-2">
                            <div className="flex mt-2 gap-0.5">
                                <div>
                                    <div
                                        className="border dark:border-gray-500 p-2 py-2.5 rounded-md cursor-pointer bg-red-600"
                                        onClick={
                                            () => {
                                                const repay = getValues(`salary_deductions.${index}.deductions_label`);
                                                if (repay === 'Advance repay') {
                                                    setAdvancePay(false);
                                                }
                                                remove(index);
                                            }
                                        }
                                    >
                                        <HiMinus className="text-xl text-white" />
                                    </div>
                                </div>

                                <div>
                                    <div
                                        className="border dark:border-gray-500  rounded-md px-2 py-2.5 cursor-pointer bg-green-600"
                                        onClick={() => insert(index + 1, salaryItems)}
                                    >
                                        <HiPlus className="text-xl text-white" />
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                ))}
                <div>
                </div>
            </div>
        </>
    );
};

export default SalaryDeductionsRow;