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

const VboxContainer = require('./vbox.container');
const InfoContainer = require('./info.container');
const molecule = require('./molecule');
const saw = require('./saw.component');

function Cryp(cryp, sendVboxApply, setInfo) {
    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" onClick={() => setInfo(s, cryp)}>{s}</button>;
    });

    // needed for ondrop to fire
    function onDragOver(e) {
        e.preventDefault();
        return false;
    }

    function onDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        const item = parseInt(e.dataTransfer.getData('text'), 10);
        return sendVboxApply(cryp.id, item);
    }

    const stats = [
        { stat: 'hp', colour: '#1FF01F' },
        { stat: 'green_damage', colour: '#1FF01F' },
        { stat: 'red_shield', colour: '#a52a2a' },
        { stat: 'red_damage', colour: '#a52a2a' },
        { stat: 'blue_shield', colour: '#3498db' },
        { stat: 'blue_damage', colour: '#3498db' },
        { stat: 'speed', colour: '#FFD123' },
    ].map((s, i) => (
        <figure key={i} alt={s.stat}>
            {saw(s.colour)}
            <figcaption>{cryp[s.stat].value}</figcaption>
        </figure>
    ));

    return (
        <div
            key={cryp.id}
            className="cryp-box"
            onDragOver={onDragOver}
            onDrop={onDrop}
            >
            <div className="cryp-box-top">
                <figure className="img" onClick={() => setInfo(null, cryp)}>
                    {molecule}
                    <figcaption>{cryp.name}</figcaption>
                </figure>
                <div className="skills">
                    {skills}
                </div>
            </div>
            <div className="stats">
                {stats}
            </div>
        </div>
    );
}

function InstanceComponent(args) {
    const {
        // account,
        instance,
        quit,
        sendInstanceReady,
        sendVboxApply,
        setInfo,
    } = args;

    if (!instance) return <div>...</div>;

    const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));

    return (
        <main className="instance" >
            <div className="instance-hdr">
                <button
                    className="instance-btn instance-ui-btn menu-btn left"
                    onClick={quit}>
                    Menu
                </button>
                <div className="spacer">
                    <div>&nbsp;</div>
                </div>
                <button
                    className="instance-btn instance-ui-btn ready-btn"
                    onClick={() => sendInstanceReady()}>
                    Ready
                </button>
            </div>
            <VboxContainer />
            <div className="cryp-list">
                {cryps}
            </div>
            <InfoContainer />
        </main>
    );
}

module.exports = InstanceComponent;