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";

type EditManagersModalProps = {
    children?: ReactNode
    close: any
    projectTitle: string
    projectCode:string | number
    editManagers: (managers: any) => void
    oldManagers: any
    availableManagers: any
}

const EditManagersModal = ({children, editManagers, projectTitle='',projectCode='', close, oldManagers, availableManagers}: EditManagersModalProps) => {

    const [managers, setManagers] = useState(oldManagers);
    const {allowedActions} = useModuleOptions()
    useEffect(() => {
        setManagers(oldManagers);
    }, [oldManagers]);

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


    const canEditManagers = WithRuleBoolean( "managers");
    const canEditManagersReverse = !canEditManagers;

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



            </div>
        </ConfirmationModal>
    );
}

export default EditManagersModal;