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

/**
 * Composant d'édition d'un EIP.
 *
 * @component
 * @param {import('../../../../jsdoc/types').ContexteAgGrid} props.context - Le contexte d'affichage de la liste
 * @param {object} props.eip - L'EIP à éditer, sous forme d'objet de type {domaineId: ..., filiereId: ..., nfId: ...}
 * @param {function} props.setEip - Setter pour modifier la valeur de l'EIP
 * @param {string} props.titre - Titre éventuel
 *
 * @example
 * return (
 * <EipEditor />
 * )
 */
const EipEditor = (props) => {
    const [eip, setEip] = useState(props.eip || { domaineId: '', filiereId: '', nfId: '' });

    useEffect(() => {
        props.setEip({
            domaineId: eip.domaineId || null,
            filiereId: eip.filiereId || null,
            nfId: eip.nfId || null
        });
    }, [eip]);

    const refContainer = useRef(null);

    const refSelectDomaine = useRef(null);

    // Id uniques pour les champs
    const inputDomaineId = nanoid();
    const inputFiliereId = nanoid();
    const inputNfId = nanoid();

    useEffect(() => {
        focus();
    }, []);

    const focus = () => {
        window.setTimeout(() => {
            let container = ReactDOM.findDOMNode(refContainer.current);
            if (container) {
                container.focus();
            }

            refSelectDomaine.current.focus();
        });
    };

    const refs = getRefs(props);
    return (
        <div className="EipEditor">
            {props.titre && <p className="titre">{props.titre}</p>}

            <form>
                <div className="field">
                    <label htmlFor={inputDomaineId}>Domaine</label>
                    <span>
                        <select
                            className="domaine"
                            ref={refSelectDomaine}
                            id={inputDomaineId}
                            value={eip.domaineId || ''}
                            onChange={(event) => {
                                setEip({ ...eip, domaineId: event.target.value || '', filiereId: '' });
                            }}
                        >
                            <option>{eip.domaineId}</option>
                            {refs?.domaines?.map((d) => (
                                <option key={d.id} value={d.id}>
                                    {d.code + ' (' + d.libelle + ')'}
                                </option>
                            ))}
                        </select>
                    </span>
                </div>

                <div className="field">
                    <label htmlFor={inputFiliereId}>Filière</label>
                    <span>
                        <select
                            className="filiere"
                            id={inputFiliereId}
                            value={eip.filiereId || ''}
                            onChange={(event) => {
                                setEip({ ...eip, filiereId: event.target.value || null });
                            }}
                            disabled={!eip.domaineId || !refs?.filieres?.filter((f) => f.domaineId == eip.domaineId)?.length}
                        >
                            <option>{eip.filiereId}</option>
                            {eip.domaineId &&
                                refs?.filieres
                                    ?.filter((f) => f.domaineId == eip.domaineId)
                                    ?.map((f) => (
                                        <option key={f.id} value={f.id}>
                                            {f.code + ' (' + f.libelle + ')'}
                                        </option>
                                    ))}
                        </select>
                    </span>
                </div>

                <div className="field">
                    <label htmlFor={inputNfId}>Niveau fonctionnel</label>
                    <span>
                        <select
                            className="nf"
                            id={inputNfId}
                            value={eip.nfId || ''}
                            onChange={(event) => {
                                setEip({ ...eip, nfId: event.target.value || null });
                            }}
                        >
                            <option>{eip.nfId}</option>
                            {refs?.NF?.map((nf) => (
                                <option key={nf.id} value={nf.id}>
                                    {nf.code}
                                </option>
                            ))}
                        </select>
                    </span>
                </div>
            </form>
        </div>
    );
};

export default EipEditor;
