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

const shapes = require('./shapes');


function storeElement(props) {
    const {
        clearVboxSelected,
        setVboxSelected,
        storeSelect,
        stashSelect,
        vbox,
        vboxHighlight,
        vboxHover,
    } = props;

    function availableBtn(v, group, index) {
        if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
        const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);

        const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);

        function onClick(e) {
            e.stopPropagation();
            if (storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index)) {
                return setVboxSelected(
                    { storeSelect: storeSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
                );
            }

            if (!storeSelect.length && !stashSelect.length) {
                return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
            }
            if (notValidCombo) {
                return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] });
            }
            return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect });
        }


        const classes = selected
            ? `${v.toLowerCase()} highlight`
            : `${v.toLowerCase()} ${notValidCombo ? 'fade' : ''}`;

        const vboxObject = shapes[v] ? shapes[v]() : v;
        const disabled = vbox.bits <= group;
        return (
            <label
                key={group * 10 + index}
                onDragEnd={clearVboxSelected}>
                <button
                    class={classes}
                    disabled={disabled}
                    onMouseOver={e => vboxHover(e, v)}
                    onMouseDown={onClick}
                    onClick={e => e.stopPropagation()}
                > {vboxObject}
                </button>
            </label>
        );
    }

    return (
        <div class='store'
            onClick={e => e.stopPropagation()}>
            <div class="vbox-colours">
                {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
            </div>
            <div class="vbox-items">
                {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
                {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
            </div>
        </div>
    );
}

module.exports = storeElement;