import { Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
import { FC, useState } from "react";
import ActionButton from "../action-button";
import { InputField } from "../forms/Inputs";
import { useFieldArray, useFormContext } from "react-hook-form";

type props = {
    isOpen?: boolean
    setOpen?: (x: boolean) => void,
}
const SalaryModify: FC<props> = ({ isOpen = false, setOpen = () => { } }) => {

    const {
        formState: { errors },
        control,
        setValue,
        getValues,
    } = useFormContext();
    const { fields, remove, insert, append } = useFieldArray({
        name: "salary_items",
        control,
    });
    console.log(getValues("salary_items"))
    return (
        <Modal show={isOpen} onClose={() => setOpen(false)} size={"sm"}>
            <ModalHeader>Small modal</ModalHeader>
            <ModalBody>
                <div className="space-y-6 p-6">
                    <div>
                        <InputField name="items_label" />
                        <InputField name="items_value" />
                    </div>
                </div>
            </ModalBody>
            <ModalFooter>
                <ActionButton type="any" onClick={() => {
                    setOpen(false);
                    append({ "items_label": "test", "items_value": 500 });
                    // setValue("salary_items", Object.assign({ "items_label": "test", "items_value": 500 }, getValues("salary_items")));
                }}>Apply</ActionButton>
            </ModalFooter>
        </Modal>
    )
}

export default SalaryModify;