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 shapes = require('./shapes');
const { STATS, SPECS } = require('../utils');

function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
    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('skill', { skill: 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);
    }

    function onClick(e) {
        e.stopPropagation();
        e.preventDefault();

        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
        document.getElementsByClassName('instance-info')[0].scrollIntoView();

        return setInfo('cryp', cryp);
    }

    const specs = cryp.specs.map((s, i) => (
        <figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
            {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
            <figcaption>{SPECS[s].caption}</figcaption>
        </figure>
    ));

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

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

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

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

    return (
        <main className="instance" onClick={() => setActiveVar(null)} >
            <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;
