mnml/client/src/components/info.component.jsx

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,
    } = args;

    function infoVar(info) {
        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 };
        const [type, value] = info;

        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>
            );
        }

        function thresholds(t, spec) {
            return (
                SPEC_CONSTANT[spec].colours.map((c, i) => (
                    <figure key={i} alt={c.colour}>
                        {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
                        <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
                    </figure>
                ))
            );
        }

        if (type === 'spec') {
            const breaks = SPEC_CONSTANT[value.spec].thresholds ? SPEC_CONSTANT[value.spec].thresholds.map((t, i) => {
                const threshold = thresholds(t, value.spec);
                return (
                    <div className="thresholds" key={i} alt={t}>
                        {threshold}
                    </div>
                );
            }) : null;
            return (
                <div className="info-spec">
                    <div>
                        <div> {value.spec} </div>
                        <div> {SPEC_CONSTANT[value.spec].description} </div>
                        {breaks}
                    </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, 4).map(i => {
            const s = cryp.skills[i]
                ? cryp.skills[i].skill
                : (<span>&nbsp;</span>);
            return <button key={i} className="cryp-skill-btn right" >{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) => (
            <figure key={i}>
                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
                <figcaption>{SPECS[s].caption}</figcaption>
            </figure>
        ));


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

    const infoCryp = activeCryp
        ? infoCrypElement(activeCryp)
        : null;

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

    return (
        <div className="instance-info">
            {infoCryp}
            {otherInfo}
        </div>
    );
}

module.exports = Info;