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

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

const addState = connect(
    function receiveState(state) {
        const { account, activeConstruct, itemInfo, info, ws, instance, itemUnequip } = state;
        const player = instance.players.find(p => p.id === account.id);

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

        return { player, itemInfo, instance, info, sendUnequip, activeConstruct, 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,
        instance,

        itemUnequip,
        setItemEquip,
        setItemUnequip,
        activeConstruct,

        itemInfo,
        sendUnequip,

        setInfo,
    } = props;

    if (instance.phase === 'Lobby') return false;

    const { vbox } = player;

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

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

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

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

    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 => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
                    {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 => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
                    {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
                    <figcaption>{SPECS[item].caption}</figcaption>
                </figure>
            );
        } return false;
    });

    if (skills.every(s => !s)) skills.push(<button disabled={true}>&nbsp;</button>);
    if (specs.every(s => !s)) {
        specs.push(
            <figure>
                {shapes.diamond('stat-icon gray')}
                <figcaption>&nbsp;</figcaption>
            </figure>
        );
    }

    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);