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

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

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

    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 className="cryp-box">
            <figure className="img">
                {molecule}
                <figcaption>{cryp.name}</figcaption>
            </figure>
            <div className="skills">
                {skills}
            </div>
            <div className="stats">
                {stats}
            </div>
        </div>
    );
}

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

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

    const cryps = instance.cryps.map(Cryp);

    return (
        <section className="instance" >
            <div className="row">
                <div className="three columns">
                    <button
                        className="instance-btn instance-ui-btn glow-btn"
                        onClick={quit}>
                        Menu
                    </button>
                </div>
                <div className="six columns">
                    <div>&nbsp;</div>
                </div>
                <div className="three columns">
                    <button
                        className="instance-btn instance-ui-btn green-btn u-pull-right"
                        onClick={() => sendInstanceReady()}>
                        Ready
                    </button>
                </div>
            </div>
            <div className="row">
                <VboxContainer />
                <div className="three columns">
                    {cryps}
                </div>
            </div>
        </section>
    );
}

module.exports = InstanceComponent;