const preact = require('preact');
const { connect } = require('preact-redux');
const range = require('lodash/range');

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

const addState = connect(({ vboxHighlight }) => ({ vboxHighlight }));

class storeElement extends preact.Component {
    shouldComponentUpdate(newProps) {
        if (newProps.clearVboxSelected !== this.props.clearVboxSelected) return true;
        if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
        if (newProps.vbox !== this.props.vbox) return true;
        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
        if (newProps.vboxHover !== this.props.vboxHover) return true;
        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
        return false;
    }

    render(props) {
        const {
            // passed props
            clearVboxSelected,
            setVboxSelected,
            vbox,
            vboxHover,
            vboxSelected,
            // connect state props
            vboxHighlight,
        } = props;

        const { storeSelect, stashSelect } = vboxSelected;

        function availableBtn(v, group, index) {
            if (!v) return <button disabled class='empty' key={group + 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 + 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.store['Colours'][i], 'Colours', i.toString()))}
                </div>
                <div class="vbox-items">
                    {range(0, 3).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))}
                    {range(0, 3).map(i => availableBtn(vbox.store['Specs'][i], 'Specs', i.toString()))}
                </div>
            </div>
        );
    }
}

module.exports = addState(storeElement);