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

function Info(args) {
    const {
        info,
        sendUnequip,
        instance,
    } = args;
    if (!info.length) return (<div className="instance-info">&nbsp;</div>);
    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 (SPECS[value]) {
            itemDetails = SPECS[value];
        } else if (COLOURS[value]) {
            itemDetails = COLOURS[value];
        }
        return (
            <div className="instance-info">
                {value} - {itemDetails.description}
            </div>
        );
    }

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

    function thresholds(t, spec) {
        return (
            SPECS[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 = SPECS[value.spec].thresholds ? SPECS[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="instance-info">
                <div>
                    <div> {value.spec} </div>
                    <div> {SPECS[value.spec].description} </div>
                    {breaks}
                </div>
                <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
                    unequip
                </button>
            </div>
        );
    }

    if (type === 'cryp') {
        const stats = [
            { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
            { stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
            { stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
            { stat: 'red_damage', disp: 'Red Damage', colour: '#a52a2a' },
            { stat: 'blue_damage', disp: 'Blue Damage', colour: '#3498db' },
            { stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
            { stat: 'speed', disp: 'Speed', colour: '#FFD123' },
        ].map((s, i) => (
            <div key={i}>{s.disp}: {value[s.stat].base} {String.fromCharCode(8594)} {value[s.stat].max}</div>
        ));
        return (
            <div className="instance-info">
                <h5>{value.name}</h5>
                <div className="info-stats">
                    {stats}
                </div>
            </div>
        );
    }
}

module.exports = Info;