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

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

function stashElement(props) {
    const {
        combinerChange,
        itemUnequip,
        vbox,
        vboxBuySelected,
        vboxHighlight,
        vboxHover,
        vboxSelecting,
        stashSelect,

        sendItemUnequip,
        setInfo,
        setVboxSelected,

    } = props;
    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 comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';

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

            if (!comboHighlight) {
                setInfo(vbox.bound[i]);
                return setVboxSelected({ shopSelect: [], stashSelect: [i] });
            }

            stashSelect.push(i);
            // if (stashSelect.length === 3) setInfo(comboItem.item);
            return combinerChange(stashSelect);
        }

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

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

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

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

module.exports = stashElement;