import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { RiCloseCircleFill } from 'react-icons/all';
import { toast } from 'react-toastify';
import { getManagers } from '../../listes/commonAGGridFunctions';
import './PonderationsCellEditor.scss';
import PonderationsEditor from './PonderationsEditor';

/**
 * Composant d'édition de pondérations dans une cellule d'AG Grid.
 *
 * @component
 */
//TODO composant à refactoriser via un AbstractCellEditor (à la manière de AbstractPopinEditor)
const PonderationsCellEditor = forwardRef((props, ref) => {
    const [cellValue, setValue] = useState(props.value || 0);

    const refContainer = useRef(null);

    // Liste des libellés des critères
    const criteres = [];

    // Liste des nom des champs des critères
    const fields = [];

    // Liste des pondérations
    let ponderations = [];

    // --- Construction de la liste des définitions de colonnes pour pouvoir y retrouver les critères de pondération
    let allColDefs = [];
    for (let colDef of props.api.getColumnDefs()) {
        if (colDef.children && colDef.children.length) {
            // C'est un groupe, on ajoute les colonnes du groupe
            allColDefs.push(...colDef.children);
        } else {
            // Ce n'est pas un groupe
            allColDefs.push(colDef);
        }
    }

    // --- Construction de la liste des critères (libellés et champ) et des pondérations
    for (let colPondereeId of props.colonnesPonderees) {
        const colDef = allColDefs.find((colDef) => colDef.colId === colPondereeId);
        if (colDef) {
            criteres.push(colDef.headerName || colDef.colId);
            fields.push(colDef.field);
            ponderations.push(props?.data[colDef.field] || 0);
        } else {
            console.warn('PonderationsCellEditor : colonne ' + colPondereeId + ' non trouvée.');
        }
    }

    useEffect(() => {
        // A la création du composant
        focus();

        // Cleanup
        return function cleanup() {
            // MAJ des valeurs juste avant la suppression du composant
            //TODO AKA si possible MAJ de la base en 1 seule requête ici plutôt que dans onCellValueChange
            if (ponderations) {
                let data = {};
                for (let i = 0; i < ponderations.length; i++) {
                    props.node.setDataValue(fields[i], ponderations[i]);
                    data[fields[i]] = ponderations[i];
                    if (props.colDef.field === fields[i]) {
                        setValue(ponderations[i]);
                    }
                }

                getManagers(props)?.postes.update(props?.data.poste_id, data).catch((reason) => {
                    console.error(reason);
                    toast.error('Une erreur est survenue lors de la modification des pondérations. Veuillez contacter un administrateur.', {
                        autoClose: false
                    });
                });
            }
        };
    }, []);

    useImperativeHandle(ref, () => {
        return {
            getValue() {
                return cellValue;
            },

            isPopup() {
                return true;
            },

            getPopupPosition() {
                return 'under';
            },

            isCancelBeforeStart() {
                return false;
            },

            isCancelAfterEnd() {
                return false;
            }
        };
    });

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

    const closePonderationEditor = () => {
        props.api.stopEditing();
    };

    /**
     * Met à jour l'ensemble des pondérations.
     *
     * @param {Array.<number>} nouvellesPonderations
     */
    const setPonderations = (nouvellesPonderations) => {
        ponderations = [...nouvellesPonderations];
    };

    return (
        <div
            className="PonderationsCellEditor"
            ref={refContainer}
            tabIndex={1} // important - without this the key presses wont be caught
        >
            <div className="ExitButton" onClick={closePonderationEditor}>
                <RiCloseCircleFill />
                <span>Fermer</span>
            </div>
            <PonderationsEditor
                titre="Éditeur de pondérations"
                context={props.context}
                criteres={criteres}
                ponderations={ponderations}
                setPonderations={setPonderations}
            />
        </div>
    );
});

export default PonderationsCellEditor;
