import React from 'react';
import { observer } from 'mobx-react';
import Select from 'react-select';
import './ChoixFESelect.scss';

/**
 * Composant permettant de sélectionner une ou plusieurs FE dans une boîte combinée.
 *
 * @component
 * @param {string} props.value - Valeurs sélectionnées
 * @param {function} props.setValues - Fonction pour modifier les valeurs lorsqu'elles sont modifiées dans le select
 * @param {string} props.appConfig - Contexte
 */
const ChoixFESelect = observer((props) => {
    // Liste des FEs qu'il est possible de sélectionner
    const feOptions = props.appConfig.donneesReference.FEs.map((fe) => ({
        value: fe.mere_code,
        label: fe.mere_code + (fe.mere_libelle ? ` (${fe.mere_libelle})` : '')
    }));

    const customStyles = {
        valueContainer: (provided) => {
            return {
                ...provided,
                maxHeight: '60px',
                overflowY: 'auto'
            };
        }
    };

    return (
        <div className="Filtres">
            <h5>FE(s)</h5>
            <Select
                closeMenuOnSelect={false}
                options={feOptions}
                value={props.value}
                onChange={(newValue) => props.setValues(newValue)}
                isMulti
                placeholder="Sélectionner..."
                noOptionsMessage={(option) => "Aucune FE correspondante n'a été trouvée"}
                menuPlacement="top"
                className="ChoixFESelect"
                styles={customStyles}
                isDisabled={props.disabled}
            />
        </div>
    );
});

export default ChoixFESelect;
