const preact = require('preact');
const range = require('lodash/range');
const shapes = require('./shapes');

function specThresholds(player, fullInfo, info) {
    if (!info) return false;
    let red = 0;
    let blue = 0;
    let green = 0;
    player.constructs.forEach(construct => {
        red += construct.colours.red;
        blue += construct.colours.blue;
        green += construct.colours.green;
    });
    const teamColours = { red, blue, green };

    const colourReqs = fullInfo.values.bonuses || [];

    const thresholds = colourReqs.map((bonus, i) => {
        const colours = ['red', 'green', 'blue'];
        const colourGoals = {
            red: [],
            green: [],
            blue: [],
        };
        const overFlow = [];

        colours.forEach(c => {
            const colourReq = bonus.req[c];
            if (colourReqs === 0) return false;

            const start = i === 0
                ? 0
                : colourReqs[i - 1].req[c];

            const dots = range(start, colourReq).map(j => {
                const unmet = teamColours[c] < j + 1;


                const reqClass = unmet
                    ? 'unmet'
                    : '';

                if (j - start > 4) {
                    overFlow.push(
                        <figure key={j} alt={c.colour} class={reqClass} >
                            {shapes.vboxColour(c)}
                        </figure>
                    );
                } else {
                    colourGoals[c].push(
                        <figure key={j} alt={c.colour} class={reqClass} >
                            {shapes.vboxColour(c)}
                        </figure>
                    );
                }

                return true;
            });

            return dots;
        });

        const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);

        const reqClass = reqsMet
            ? ''
            : 'unmet';

        const goals = colours.map((c, j) => {
            if (colourGoals[c].length) {
                return (
                    <div key={j}>{colourGoals[c]}</div>
                );
            }
            return false;
        });
        const bonusObj = info.includes('Life')
            ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
            : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
        const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
        return (
            <div key={i} class="spec-goal">
                {goals}
                {overFlowObj}
                {bonusObj}
            </div>
        );
    });
    return (
        <div>
            <div class="thresholds">
                {thresholds}
            </div>
        </div>

    );
}

module.exports = specThresholds;