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

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

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

    const [competences, setCompetences] = useState(
        props.competences
            ? props.competences.flatMap((idComp) => {
                  const oc = optionsCompetences.find((c) => c.value === idComp);
                  if (oc) return oc;

                  console.warn('CompetencesEditor - Compétence inconnue : id=' + idComp);
                  return [];
              })
            : []
    );

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

        props.setCompetences(competences.map((c) => c.value));
    }, [competences]);

    // Nb maximum de compétences 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="CompetencesEditor">
            {props.titre && <p className="titre">{props.titre}</p>}

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

export default CompetencesEditor;
