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


type EditSpecialityModalProps = {
    children?: ReactNode
    close: any
    editSpeciality: (speciality:any) => void
    specialities: any
    oldSpeciality: any
}

const EditSpecialityModal = ({children, editSpeciality, close, oldSpeciality, specialities}: EditSpecialityModalProps) => {

    const [speciality, setSpeciality] = useState(oldSpeciality);
    const {allowedActions} = useModuleOptions();

    useEffect(() => {
        setSpeciality(oldSpeciality);
    }, [oldSpeciality]);

    const canEditSpeciality = WithRuleBoolean('speciality');
    const canEditSpecialityReverse = !canEditSpeciality;
    return (
        <ConfirmationModal
            onClose={() => close()}
            title={(canEditSpeciality ? 'Επιλογή' : 'Προβολή') + ' Ειδικότητας'}
            text={canEditSpecialityReverse
                ? 'Παρακάτω βλέπετε την ειδικότητα του συνεργάτη στο έργο:'
                : 'Παρακάτω επιλέξτε από την παρακάτω λίστα την ειδικότητα του συνεργάτη στο έργο:'}
            modalAction={() => editSpeciality(speciality)}
            className={'edit-speciality'}
            FormButtonCancelText={'ΑΚΥΡΩΣΗ'}
            FormButtonSubmitText={'ΑΠΟΘΗΚΕΥΣΗ'}
            isDisabled={canEditSpecialityReverse}
            jokerProp={canEditSpecialityReverse}
        >
            <div className={'form mb-6'}>
                {canEditSpecialityReverse && specialities.length === 0
                    ? <p style={{textAlign: 'center'}}>Δεν υπάρχουν Δεδομένα</p>
                    : <MakeCustomSelect
                        options={specialities}
                        value={speciality}
                        handleChange={(n) => setSpeciality(n)}
                        disabled={canEditSpecialityReverse}
                    />
                }
            </div>
        </ConfirmationModal>
    );
}

export default EditSpecialityModal;