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

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

/**
 * Composant d'édition de pondérations.
 *
 * @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
 * @param {string} props.titre - Titre éventuel
 *
 * @example
 * return (
 * <PonderationsEditor criteres={["Domaine","Filière","NF"]} ponderations={[17,12,3]} setPonderations={...} context={...} />
 * )
 */
const PonderationsEditor = (props) => {
    // Poids maximum
    const POIDS_MAXIMUM = 5;

    // Pondérations relatives (non arrondies)
    const [ponderationsRelatives, setPonderationsRelatives] = useState([...props.ponderations]);

    // Pondérations absolues (entier entre 0 et POIDS_MAXIMUM)
    const [ponderationsAbsolues, setPonderationsAbsolues] = useState(convertitPonderationsRelativesEnAbsolues(props.ponderations));

    // Nb de critères
    const nbCriteres = props.ponderations.length;

    // Mise à jour des pondérations arrondies
    useEffect(() => {
        // MAJ des pondérations
        props.setPonderations(ponderationsRelatives);
    }, [ponderationsRelatives]);

    /* Modifie une pondération */
    const changePonderation = (index, value) => {
        // Mise à jour des pondérations absolues
        const newPonderationsAbsolues = [...ponderationsAbsolues];
        newPonderationsAbsolues[index] = parseInt(value, 10);

        // Mise à jour des pondérations relatives
        let total = newPonderationsAbsolues.reduce((a, b) => a + b, 0);
        const newPonderationsRelatives = newPonderationsAbsolues.map((pa) => (pa / total) * 100);

        if (total == 0) {
            // Erreur, on annule la saisie en gardant les anciennes pondérations
            setPonderationsAbsolues([...ponderationsAbsolues]);
        } else {
            setPonderationsAbsolues(newPonderationsAbsolues);
            setPonderationsRelatives(newPonderationsRelatives);
        }
    };

    /* Equirépartit les pondérations */
    const equirepartir = () => {
        setPonderationsAbsolues(Array(nbCriteres).fill(1));
        setPonderationsRelatives(Array(nbCriteres).fill(100 / nbCriteres));
    };

    return (
        <div className="PonderationsEditor">
            {props.titre && <p className="titre">{props.titre}</p>}

            <form>
                <ul>
                    {props.criteres.map((critere, index) => {
                        return (
                            <li key={critere}>
                                <label htmlFor={'pond_' + critere}>{critere}</label>

                                <span className="slider">
                                    <input
                                        id={'pond_' + critere}
                                        type="range"
                                        value={Math.round(ponderationsAbsolues[index])}
                                        min={0}
                                        max={POIDS_MAXIMUM}
                                        step={1}
                                        onChange={(event) => {
                                            changePonderation(index, event.target.value);
                                        }}
                                    />
                                </span>

                                <span className="pc">
                                    <span
                                        style={{
                                            backgroundColor: ColorManipulation.getColorForPercentage(
                                                ponderationsRelatives[index] / 100,
                                                1,
                                                ColorManipulation.COLOR_GRADIENT_WHITE_GREEN,
                                                true
                                            )
                                        }}
                                    >
                                        {ponderationsRelatives[index].toFixed(1)}%
                                    </span>
                                </span>
                            </li>
                        );
                    })}

                    <li className="actions">
                        <span />
                        <span className="slider">
                            <a
                                href="#"
                                onClick={(e) => {
                                    e.preventDefault();
                                    equirepartir();
                                }}
                            >
                                Equirépartir les pondérations
                            </a>
                        </span>
                        <span />
                    </li>
                </ul>
            </form>
        </div>
    );
};

export default PonderationsEditor;
