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

/**
 * Composant d'édition d'une liste de départements.
 *
 * @component
 * @param {import('../../../../jsdoc/types').ContexteAgGrid} props.context - Le contexte d'affichage de la liste
 * @param {string} props.departements - Les départements à afficher/modifier
 * @param {function} props.setDepartements - Setter pour modifier la valeur des departements
 * @param {number} props.maxSelectedItems - Nombre maximum de départements pouvant être sélectionnés
 * @param {string} props.titre - Titre éventuel
 *
 * @example
 * return (
 * <DepartementsEditor />
 * )
 */
const DepartementsEditor = (props) => {
    // Liste des départements possibles
    const optionsDepartements = getRefs(props)?.departements?.map((d) => ({
        value: d.id,
        label: d.code + (d.libelle != d.code ? ' (' + d.libelle + ')' : '')
    })) ?? [];

    //console.log('DepartementEditor init', props);

    const [departements, setDepartements] = useState(
        props.departements
            ? props.departements.flatMap((idDept) => {
                  const oc = optionsDepartements.find((d) => d.value === idDept);
                  if (oc) return oc;

                  console.warn('DepartementsEditor - Département inconnu : id=' + idDept);
                  return [];
              })
            : []
    );

    useEffect(() => {
        //console.log('DepartementEditor useEffect', props);

        props.setDepartements(departements.map((d) => d.value));
    }, [departements]);

    // Nb maximum de départements 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="DepartementsEditor">
            {props.titre && <p className="titre">{props.titre}</p>}

            <Select
                ref={refSelect}
                isMulti
                autoFocus
                options={optionsDepartements}
                value={departements}
                isOptionDisabled={(option) => departements.length >= maxSelectedItems}
                onChange={(newValue, actionMeta) => {
                    setDepartements(newValue);
                }}
                className="basic-multi-select"
                classNamePrefix="select"
                styles={selectStyles}
                placeholder="Entrez ici le code d'un département ou sélectionnez-le dans la liste..."
                noOptionsMessage={(option) => "Aucun département correspondant n'a trouvé"}
                loadingMessage={(option) => 'Chargement en cours...'}
            />
            <div className="actions">
                <a
                    href="#"
                    onClick={(e) => {
                        e.preventDefault();
                        setDepartements([]);
                        focus();
                    }}
                >
                    Effacer tous les départements
                </a>
            </div>
        </div>
    );
};

export default DepartementsEditor;
