import React, { useEffect, useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';
import { getRefs } from '../../listes/commonAGGridFunctions';

import './ZonesEditor.scss';

/**
 * Composant d'édition d'une liste de zones géographiques SHM.
 *
 * @component
 * @param {Object} props.context - Le contexte d'affichage de la liste
 * @param {string} props.zones - Les zones à afficher/modifier
 * @param {function} props.setZones - Setter pour modifier la valeur des zones
 * @param {number} props.maxSelectedItems - Nombre maximum de compétences pouvant être sélectionnées
 * @param {string} props.titre - Titre éventuel
 *
 * @example
 * return (
 * <ZonesEditor />
 * )
 */
const ZonesEditor = (props) => {
    // Liste des zones possibles
    //console.log('CompetenceEditor init', props);

    const optionsZones = getRefs(props)?.Zones?.map((d) => ({
        value: d.id,
        label: d.libelle
    })) ?? [];
    const [zones, setZones] = useState(
        props.zones
            ? props.zones.flatMap((Zonelib) => {
                const oc = optionsZones.find((d) => d.label === Zonelib);
                if (oc) return oc;

                console.warn('ZonesEditor - Zone inconnu : id=' + Zonelib);
                return [];
            })
            : []
    )
    useEffect(() => {
        //console.log('CompetenceEditor useEffect', props);

        props.setZones(zones.map((d) => d.label));
    }, [zones]);
    // Nb maximum de zones sélectionnables
    const maxSelectedItems = props.maxSelectedItems || 10000000;
    const refContainer = useRef(null);
    const refSelect = useRef(null);
    useEffect(() => {
        focus();
    }, []);
    const focus = () => {
        window.setTimeout(() => {
            let container = ReactDOM.findDOMNode(refContainer.current);
            if (container) {
                container.focus();
            }

            refSelect.current.focus();
        });
    };
    const selectStyles = {
        control: (styles) => ({ ...styles, minWidth: '45em' })
    };
    return (
        <div className="ZonesEditor">
            {props.titre && <p className="titre">{props.titre}</p>}

            <Select
                ref={refSelect}
                isMulti
                autoFocus
                options={optionsZones}
                value={zones}
                isOptionDisabled={(option) => zones.length >= maxSelectedItems}
                onChange={(newValue, actionMeta) => {
                    setZones(newValue);
                }}
                className="basic-multi-select"
                classNamePrefix="select"
                styles={selectStyles}
                placeholder="Entrez ici le nom d'une zone géographique ou sélectionnez-la dans la liste..."
                noOptionsMessage={(option) => "Aucune zones géographiques correspondante n'a trouvée"}
                loadingMessage={(option) => 'Chargement en cours...'}
            />
            <div className="actions">
                <a
                    href="#"
                    onClick={(e) => {
                        e.preventDefault();
                        setZones([]);
                        focus();
                    }}
                >
                    Effacer toutes les zones
                </a>
            </div>
        </div>
    );
};

export default ZonesEditor;
