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

const actions = require('../actions');
const { convertItem, SPECS } = require('./../utils');

const addState = connect(
    function receiveState(state) {
        const { player, activeCryp, itemInfo, info, ws, instance, itemUnequip } = state;

        function sendUnequip(crypId, item) {
            return ws.sendVboxUnequip(instance.id, crypId, item);
        }

        return { player, itemInfo, info, sendUnequip, activeCryp, itemUnequip };
    },

    function receiveDispatch(dispatch) {
        function setInfo(item) {
            dispatch(actions.setInfo(item));
        }

        function clearInfo() {
            return dispatch(actions.setInfo(null));
        }

        function setItemEquip(v) {
            return dispatch(actions.setItemEquip(v));
        }

        function setItemUnequip(v) {
            return dispatch(actions.setItemUnequip(v));
        }

        return { setInfo, setItemEquip, setItemUnequip, clearInfo };
    }

);

function Equipment(props) {
    const {
        player,

        itemUnequip,
        setItemEquip,
        setItemUnequip,
        activeCryp,

        itemInfo,
        sendUnequip,

        setInfo,
    } = props;

    const { vbox } = player;

    const fullInfo = itemInfo.items.find(i => i.item === itemUnequip);
    const isSkill = fullInfo && fullInfo.skill;
    const isSpec = fullInfo && fullInfo.spec;

    function boundClick(e, i) {
        if (itemUnequip && activeCryp) return false;
        const value = vbox.bound[i];
        setItemEquip(i);
        return false;
    }

    function unequipClick(e) {
        e.stopPropagation();
        if (!itemUnequip) return false;
        if (!activeCryp) return false;
        setItemUnequip(null);
        return sendUnequip(activeCryp.id, itemUnequip);
    }

    const skillClass = isSkill ? 'skills highlight' : 'skills';
    const specClass = isSpec ? 'specs highlight' : 'specs';

    const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
    const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);

    const skills = range(0, 9).map(i => {
        const item = convertItem(vbox.bound[i]);
        if (skillList.includes(item)) {
            return (
                <button key={i} onClick={e => boundClick(e, i)}>
                    {item}
                </button>
            );
        } return false;
    });

    const specs = range(0, 9).map(i => {
        const item = convertItem(vbox.bound[i]);
        if (specList.includes(item)) {
            return (
                <figure key={i} onClick={e => boundClick(e, i)}>
                    {SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
                    <figcaption>{SPECS[item].caption}</figcaption>
                </figure>
            );
        } return false;
    });

    function hoverInfo(e, info) {
        e.stopPropagation();
        return setInfo(info);
    }

    return (
        <div className="equip" >
            <div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
                <h3>Skills</h3>
                <div className ="items">
                    {skills}
                </div>
            </div>
            <div className={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
                <h3>Specs</h3>
                <div className ="items">
                    {specs}
                </div>
            </div>
        </div>
    );
}

module.exports = addState(Equipment);