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

const Hammer = require('hammerjs');

const Vbox = require('./vbox.component');
const InfoContainer = require('./info.container');
const InstanceConstructsContainer = require('./instance.constructs');
const Faceoff = require('./faceoff');

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

const addState = connect(
    function receiveState(state) {
        const {
            instance,
            nav,
            navInstance,
        } = state;
        return {
            instance,
            nav,
            navInstance,
        };
    },

    function receiveDispatch(dispatch) {
        function setInfo(c) {
            return dispatch(actions.setInfo(c));
        }

        function setNavInstance(c) {
            return dispatch(actions.setNavInstance(c));
        }


        function clearItems() {
            dispatch(actions.setCombiner([]));
            dispatch(actions.setReclaiming(false));
            dispatch(actions.setItemEquip(null));
            dispatch(actions.setItemUnequip([]));
            dispatch(actions.setVboxHighlight([]));
            dispatch(actions.setVboxSelected([]));
            return true;
        }

        return {
            setInfo,
            clearItems,
            setNavInstance,
        };
    }
);

class Instance extends Component {
    shouldComponentUpdate(newProps) {
        if (newProps.instance !== this.props.instance) return true;
        return false;
    }

    render(args) {
        const {
            instance,
            clearItems,
        } = args;

        if (!instance) return false;

        if (instance.phase !== 'InProgress') {
            return <Faceoff />;
        }

        function instanceClick(e) {
            e.stopPropagation();
            clearItems();
        }

        function onTouchMove(e) {
            e.preventDefault();
        }

        return (
            <main id="instance" class='instance' onClick={instanceClick}>
                <Vbox />
                <InfoContainer />
                <InstanceConstructsContainer />
            </main>
        );
    }

    componentDidMount() {
        if (!this.h) this.bindSwipes();
    }

    componentDidUpdate() {
        if (!this.h) this.bindSwipes();
    }

    bindSwipes() {
        const instance = document.getElementById('instance');
        if (!instance) {
            return setTimeout(this.bindSwipes, 50);
        }
        if (this.h) this.h.destroy();
        this.h = new Hammer(instance);
        this.h.on('swiperight', () => {
            const {
                navInstance,
                setNavInstance,
            } = this.props;
            setNavInstance(navInstance === 0 ? 3 : navInstance - 1);
        });

        this.h.on('swipeleft', () => {
            const {
                navInstance,
                setNavInstance,
            } = this.props;
            setNavInstance((navInstance + 1) % 4);
        });

        return true;
    }
}

module.exports = addState(Instance);