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

const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
const { COLOUR_ICONS, STATS, SPECS } = require('../utils');

function Info(args) {
    const {
        activeCryp,
        info,
        sendUnequip,
        instance,
        setInfo,
    } = args;

    function infoVar([type, value]) {
        let red = 0; let blue = 0; let green = 0;
        instance.cryps.forEach(cryp => {
            red += cryp.colours.red;
            blue += cryp.colours.blue;
            green += cryp.colours.green;
        });
        const teamColours = { red, blue, green };

        if (type === 'item') {
            let itemDetails;
            if (SKILLS[value]) {
                itemDetails = SKILLS[value];
            } else if (SPEC_CONSTANT[value]) {
                itemDetails = SPEC_CONSTANT[value];
            } else if (COLOURS[value]) {
                itemDetails = COLOURS[value];
            }
            return (
                <div className="info-var">
                    {value} - {itemDetails.description}
                </div>
            );
        }

        if (type === 'skill') {
            return (
                <div className="info-skill">
                    <div> {value.skill} </div>
                    <div> {SKILLS[value.skill].description} </div>
                    <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
                    unequip
                    </button>
                </div>
            );
        }

        if (type === 'spec') {
            const { spec } = value;
            const breaks = SPEC_CONSTANT[value.spec].thresholds;
            const colourReqs = SPEC_CONSTANT[spec].colours || [];

            const thresholdEl = colourReqs.map((c, i) => {
                const numIcons = Math.max(...breaks);
                const dots = range(0, numIcons).map(j => {
                    const unmet = teamColours[c] < j + 1;
                    const caption = breaks.includes(j + 1)
                        ? '+ x'
                        : '';

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

                    return (
                        <figure key={j} alt={c.colour} className={reqClass} >
                            {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
                            <figcaption>{caption}</figcaption>
                        </figure>
                    );
                });

                return (
                    <div key={i} className="spec-goals">
                        {dots}
                    </div>
                );
            });

            return (
                <div className="info-spec">
                    <div>
                        <div> {value.spec} </div>
                        <div> {SPEC_CONSTANT[value.spec].description} </div>
                        <div className="thresholds">
                            {thresholdEl}
                        </div>
                    </div>
                    <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
                        unequip
                    </button>
                </div>
            );
        }
    }

    function infoCrypElement(cryp) {
        // onClick={() => setInfo('skill', { skill: s, cryp })}
        const skills = range(0, 3).map(i => {
            const skill = cryp.skills[i];

            function skillClick() {
                if (!skill) return false;
                return setInfo('skill', { skill: skill.skill, cryp });
            }

            const s = cryp.skills[i]
                ? cryp.skills[i].skill
                : (<span>&nbsp;</span>);
            return <button key={i} alt={s} className="cryp-skill-btn" onClick={skillClick} >{s}</button>;
        });

        const stats = Object.values(STATS).map((s, j) => (
            <figure key={j} alt={s.stat} className={s.stat}>
                {s.svg(`stat-icon ${s.colour}`)}
                <figcaption>{cryp[s.stat].value}</figcaption>
            </figure>
        ));

        const specs = cryp.specs.map((s, i) => {
            function specClick() {
                setInfo('spec', { spec: s, cryp });
            }

            return (
                <figure key={i} onClick={specClick} >
                    {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
                    <figcaption>{SPECS[s].caption}</figcaption>
                </figure>
            );
        });


        return (
            <div className="info-cryp">
                <h2>{cryp.name}</h2>
                <div className="stats">
                    {stats}
                </div>
                <div className="specs">
                    {specs}
                </div>
                <div className="skills">
                    {skills}
                </div>
            </div>
        );
    }

    const infoCryp = activeCryp
        ? infoCrypElement(instance.cryps.find(c => c.id === activeCryp.id))
        : null;

    const otherInfo = info.length
        ? infoVar(info)
        : null;

    const instanceInfoClass = `instance-info ${activeCryp ? '' : 'hidden'}`;

    return (
        <div className={instanceInfoClass} >
            {infoCryp}
            {otherInfo}
        </div>
    );
}

module.exports = Info;
