import React, {ReactNode, useEffect, useState, useMemo} from 'react';
import ConfirmationModal from "../../UI/Modal/ActionsModal/ConfirmationModal";
import CustomSelect from "../../UI/Forms/CustomSelect/CustomSelect";
import SelectItem from "../../UI/Forms/CustomSelect/SelectItem";
import useModuleOptions from "../../../hooks/useModuleOptions";
import {WithRuleBoolean} from "../../HOC/WithRule";
import CloseButton from "../../UI/CloseButton/CloseButton";

type EditContractWorkPackagesModalProps = {
    children?: ReactNode
    close: any
    contractCode: string | number
    editWorkPackages: (managers: any) => void
    oldWorkPackages: any
    availableWorkPackages: any
}

const EditContractWorkPackagesModal = ({children, editWorkPackages, close, contractCode, oldWorkPackages, availableWorkPackages}: EditContractWorkPackagesModalProps) => {

    const [workPackages, setWorkPackages] = useState(oldWorkPackages);
    const {allowedActions} = useModuleOptions()

    useEffect(() => {
        setWorkPackages(oldWorkPackages);
    }, [oldWorkPackages]);

    // Compare oldManagers vs managers
    const isDisabled = useMemo(() => {
        // simple compare assuming they are arrays of ids
        const oldIds = [...(oldWorkPackages ?? [])].sort();
        const newIds = [...(workPackages ?? [])].sort();
        return JSON.stringify(oldIds) === JSON.stringify(newIds);
    }, [workPackages, oldWorkPackages]);


    const canEditWorkPackages = WithRuleBoolean( "work_packages");
    const canEditWorkPackagesReverse = !canEditWorkPackages;

    return (
        <ConfirmationModal
            onClose={() => close()}
            title={(canEditWorkPackages ?'Επιλογή' : 'Προβολή') + ' Πακέτων εργασίας'}
            text={canEditWorkPackagesReverse ? 'Παρακάτω βλέπετε τα πακέτα εργασίας της σύμβασης '+ contractCode :'Επιλέξτε τα πακέτα που αντιστοιχούν, μέσα από την λίστα.'}
            modalAction={() => editWorkPackages(workPackages)}
            className={'edit-managers'}
            FormButtonCancelText={'ΑΚΥΡΩΣΗ'}
            FormButtonSubmitText={'ΑΠΟΘΗΚΕΥΣΗ'}
            isDisabled={isDisabled || canEditWorkPackagesReverse} // 🔑 disable when no change
            jokerProp={canEditWorkPackagesReverse}
        >
            <div className={'form mb-6'}>
                <div>
                    <CloseButton onClick={close} />
                </div>
                {canEditWorkPackagesReverse && workPackages.length == 0  ? <p style={{textAlign:'center'}}>Δεν υπάρχουν Δεδομένα</p> : <CustomSelect
                    disabled={canEditWorkPackagesReverse}
                    searchable
                    multiple
                    clearable={canEditWorkPackages}
                    value={workPackages ?? []}
                    theme={"user-form-select"}
                    handleChange={(n) => setWorkPackages(n)}
                >
                    {availableWorkPackages.map((workPackage: any) => (
                        <SelectItem key={workPackage.id} value={workPackage.id}>
                            {workPackage.name}
                        </SelectItem>
                    ))}
                </CustomSelect>}



            </div>
        </ConfirmationModal>
    );
}

export default EditContractWorkPackagesModal;