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

function Info(args) {
    const {
        info,
        sendUnequip,
    } = args;
    if (!info.length) return (<div className="instance-info">&nbsp;</div>);

    const [type, value] = info;
    if (type === 'item') {
        return (
            <div className="instance-info">
                {info.value} - what does it do?
            </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>
        );
    }
    if (type === 'spec') {
        return (
            <div className="instance-info">
                <div>
                    <div> {value.spec} </div>
                    <div> {SPECS[value.spec].description} </div>
                </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} - {value[s.stat].max}</div>
        ));
        const cryp = value;
        const skills = cryp.skills.map((s, i) => <button key={i} className="instance-btn"
            onClick={() => sendUnequip(cryp.id, s.skill)} >{s.skill}</button>);

        const specs = cryp.specs.map((s, i) => <button key={i} className="instance-btn"
            onClick={() => sendUnequip(cryp.id, s) }>{s}</button>);

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

module.exports = Info;