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

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

    if (info.item) {
        if (SKILLS[info.item]) {
            itemDetails = SKILLS[info.item];
        } else if (SPECS[info.item]) {
            itemDetails = SPECS[info.item];
        } else if (COLOURS[info.item]) {
            itemDetails = COLOURS[info.item];
        }
    }
    const crypHeader = info.cryp ? <h5> {info.cryp.name} </h5> : null;
    const stats = info.cryp ? [
        { 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}: {info.cryp[s.stat].max}</div>
    )) : null;
    
    const itemInfo = itemDetails
        ? <div>{info.item} - {itemDetails.description}</div>
        : null;
    
    const unequip = (itemDetails && info.cryp)
        ? <button onClick={() => sendUnequip(info.cryp.id, info.item)}> unequip </button>
        : null;


    return (
        <div className="instance-info">
            {crypHeader}
            {stats}
            {itemInfo}
            {unequip}
        </div>
    );
}

module.exports = Info;
