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

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

const shapes = require('./shapes');
const buttons = require('./buttons');
const { removeTier } = require('../utils');

const addState = connect(
    ({ itemUnequip, vboxHighlight, vboxSelected }) => ({ itemUnequip, vboxHighlight, vboxSelected }));

class stashElement extends preact.Component {
    shouldComponentUpdate(newProps) {
        if (newProps.sendItemUnequip !== this.props.sendItemUnequip) return true;
        if (newProps.setInfo !== this.props.setInfo) return true;
        if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
        if (newProps.vbox !== this.props.vbox) return true;
        if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
        if (newProps.vboxHover !== this.props.vboxHover) return true;

        if (newProps.itemUnequip !== this.props.itemUnequip) return true;
        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
        return false;
    }

    render(props) {
        const {
            // passed props
            sendItemUnequip,
            setInfo,
            setVboxSelected,
            vbox,
            vboxBuySelected,
            vboxHover,
            // connect state props
            itemUnequip,
            vboxHighlight,
            vboxSelected,
        } = props;

        const { storeSelect, stashSelect } = vboxSelected;

        const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0;

        function stashClick(e) {
            e.stopPropagation();
            if (itemUnequip.length) return sendItemUnequip(itemUnequip);
            if (vboxSelecting) return vboxBuySelected();
            return true;
        }

        function stashBtn(v, i) {
            const stashHighlight = vboxSelecting || itemUnequip.length;

            if (!v && v !== 0) {
                const emptyInvClick = () => {
                    if (vboxSelecting) return vboxBuySelected();
                    return false;
                };
                return <button
                    key={i}
                    onClick={emptyInvClick}
                    disabled={!stashHighlight}
                    class={stashHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
            }

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

            function onClick(type, e) {
                e.stopPropagation();
                const combinerContainsIndex = stashSelect.indexOf(i) > -1;
                // removing
                if (combinerContainsIndex) {
                    if (type === 'click') {
                        return setVboxSelected({ storeSelect, stashSelect: without(stashSelect, i) });
                    }
                    return true;
                }

                if (notValidCombo) {
                    setInfo(vbox.stash[i]);
                    return setVboxSelected({ storeSelect: [], stashSelect: [i] });
                }

                return setVboxSelected({ storeSelect, stashSelect: [...stashSelect, i] });
            }

            const highlighted = stashSelect.indexOf(i) > -1;
            const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
            const classes = highlighted
                ? 'highlight'
                : `${border} ${notValidCombo ? 'fade' : ''}`;

            const invObject = shapes[v] ? shapes[v]() : v;

            return (
                <label
                    key={i}
                    draggable='true'
                    onDragStart={ev => {
                        onClick('drag', ev);
                        ev.dataTransfer.setData('text', '');
                    }}>
                    <button
                        class={classes}
                        onMouseOver={e => vboxHover(e, v)}
                        onClick={e => e.stopPropagation()}
                        onMouseDown={e => onClick('click', e)}>
                        {invObject}
                    </button>
                </label>
            );
        }

        return (
            <div
                class='stash'
                onMouseDown={stashClick}
                onClick={e => e.stopPropagation()}
                onDragOver={ev => ev.preventDefault()}
                onDrop={stashClick}
            >
                {range(0, 6).map(i => stashBtn(vbox.stash[i], i.toString()))}
            </div>
        );
    }
}

module.exports = addState(stashElement);