import React, { useEffect, useState } from 'react';

import './PonderationsEditor2.scss';
import * as ColorManipulation from '../../../../helpers/color-manipulation';
import { arronditPonderations } from '../../../../helpers/maths';

/**
 * Composant d'édition de pondérations (ancienne version).
 *
 * @component
 * @param {Array.<string>} props.criteres - Liste des libellés des critères à pondérer
 * @param {Array.<number>} props.ponderations - Liste des valeurs de pondération
 * @param {function} props.setPonderations - Met à jour les pondérations
 * @param {Object} props.context - Le contexte d'affichage de la liste
 * @example
 * return (
 * <PonderationsEditor2 criteres={["Domaine","Filière","NF"]} ponderations={[17,12,3]} setPonderations={...} context={...} />
 * )
 */
const PonderationsEditor2 = (props) => {
    // Total des pondérations à atteindre
    const TOTAL_PONDERATIONS = 100;

    // Précision des pondérations (nb de décimales)
    const PRECISION = 0;

    // Nb de critères / pondérations
    const nbCriteres = props.criteres.length;

    // Pondérations flottantes (non arrondies) nécessaires au bon fonctionnement de l'éditeur
    const [ponderationsFloat, setPonderationsFloat] = useState([...props.ponderations]);

    //const [indexDernierCurseurModifié, setIndexDernierCurseurModifié] = useState(0);
    let indexDernierCurseurModifie = 0;

    // Pondérations arrondies
    const ponderationsInitialesArrondies = arronditPonderations(props.ponderations, TOTAL_PONDERATIONS, PRECISION);
    const [ponderationsArrondies, setPonderationsArrondies] = useState(ponderationsInitialesArrondies);

    // Mise à jour des pondérations arrondies
    useEffect(() => {
        const pArrondies = arronditPonderations(ponderationsFloat, TOTAL_PONDERATIONS, PRECISION, indexDernierCurseurModifie + 1);

        // Calcul et MAJ des pondérations arrondies
        setPonderationsArrondies(pArrondies);

        // MAJ des pondérations
        props.setPonderations(pArrondies);
    }, [ponderationsFloat]);

    /* Modifie une pondération */
    const changePonderation = (index, value) => {
        indexDernierCurseurModifie = index;
        const newPonderationsFloat = [...ponderationsFloat];

        let dispo = TOTAL_PONDERATIONS;
        for (let i = 0; i < index; i++) {
            dispo -= ponderationsFloat[i];
        }

        // Bornage de la pondération
        const newValue = Math.min(value, dispo);

        // Calcul de l'écart
        const delta = ponderationsFloat[index] - newValue;

        // Mise à jour de la pondération
        newPonderationsFloat[index] = newValue;

        dispo -= newValue;

        // Répartissage du delta sur les critères suivants, au prorata de leur valeur
        let reliquatTotalActuel = 0;
        for (let i = index + 1; i < nbCriteres; i++) {
            reliquatTotalActuel += ponderationsFloat[i];
        }

        dispo = Math.max(dispo, 0);

        dispo += Math.pow(10, -2 - PRECISION); // astuce pour conserver les proportions entre les critères restants en cas de remise à (presque) zéro

        if (reliquatTotalActuel > 0) {
            const k = dispo / reliquatTotalActuel;
            for (let i = index + 1; i < nbCriteres; i++) {
                newPonderationsFloat[i] = Math.max(0, ponderationsFloat[i] * k);
            }
        } else {
            // La somme des critères restants à répartir étant nulle, on équirépartit entre ces critères
            const v = dispo / (nbCriteres - index - 1);
            for (let i = index + 1; i < nbCriteres; i++) {
                newPonderationsFloat[i] = v;
            }
        }

        // MAJ pondérations
        setPonderationsFloat(newPonderationsFloat);
    };

    /* Equirépartit les pondérations */
    const equirepartir = () => {
        const newPonderationsFloat = [...ponderationsFloat];
        newPonderationsFloat.fill(TOTAL_PONDERATIONS / nbCriteres);
        setPonderationsFloat(newPonderationsFloat);
    };

    return (
        <div className="PonderationsEditor2">
            <p className="titre">Éditeur de pondérations</p>

            <form>
                <ul>
                    {props.criteres.map((critere, index) => {
                        const disabled = index === nbCriteres - 1;
                        return (
                            <li key={critere}>
                                <label htmlFor={'pond_' + critere}>{critere}</label>
                                <span className="pc">
                                    <span
                                        style={{
                                            backgroundColor: ColorManipulation.getColorForPercentage(
                                                ponderationsArrondies[index] / 100,
                                                1,
                                                ColorManipulation.COLOR_GRADIENT_WHITE_GREEN,
                                                true
                                            )
                                        }}
                                    >
                                        {Math.round(ponderationsArrondies[index])}%
                                    </span>
                                </span>
                                <span className="slider">
                                    <input
                                        id={'pond_' + critere}
                                        type="range"
                                        value={Math.round(ponderationsFloat[index])}
                                        min={0}
                                        max={TOTAL_PONDERATIONS}
                                        disabled={disabled}
                                        title={
                                            disabled
                                                ? "La pondération de ce critère n'est pas modifiable car elle est automatiquement déduite des autres pondérations."
                                                : ''
                                        }
                                        onChange={(event) => {
                                            changePonderation(index, event.target.value);
                                        }}
                                    />
                                </span>
                            </li>
                        );
                    })}
                    <li className="actions">
                        <span />
                        <span />
                        <span className="slider">
                            <a
                                href="#"
                                onClick={(e) => {
                                    e.preventDefault();
                                    equirepartir();
                                }}
                            >
                                Equirépartir les pondérations
                            </a>
                        </span>
                    </li>
                </ul>
            </form>
        </div>
    );
};

export default PonderationsEditor2;
