"use client";
import { FC } from "react";
import { InputField } from "../forms/Inputs";
import { useFieldArray, useFormContext } from "react-hook-form";
import { HiMinus, HiPlus } from "react-icons/hi";
import ItemsField from "./items-field";

type Props = {
    salaryItems?: any
};

const SalaryItemsRow: FC<Props> = ({ salaryItems }) => {
    const {
        control,
    } = useFormContext();
    const { fields, remove, insert } = useFieldArray({
        name: "salary_items",
        control,
    });

    return (
        <>
            <div className="">
                {fields.map((field: any, index) => (
                    <div className="flex gap-4" key={field.id}>
                        <ItemsField index={index} option={'items'} />
                        <div className="flex gap-2">
                            <div className="flex mt-2 gap-0.5">
                                {index > 0 ? (
                                    <div>
                                        <div
                                            className="border dark:border-gray-500 p-2 py-2.5 rounded-md cursor-pointer bg-red-600"
                                            onClick={() => remove(index)}
                                        >
                                            <HiMinus className="text-xl text-white" />
                                        </div>
                                    </div>
                                ) : (
                                    <div>
                                        <div className="border dark:border-gray-500 rounded-md p-2 py-2.5 bg-red-300">
                                            <HiMinus className="text-xl text-gray-300" />
                                        </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 SalaryItemsRow;