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

const { tutorialStage } = require('../tutorial.utils');
const { genItemInfo } = require('./vbox.utils');

const addState = connect(
    ({ info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview }) => ({
        info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview,
    }));


class Info extends preact.Component {
    shouldComponentUpdate(newProps) {
        if (newProps.clearTutorial !== this.props.clearTutorial) return true;
        if (newProps.info !== this.props.info) return true;
        if (newProps.player !== this.props.player) return true;
        if (newProps.tutorial !== this.props.tutorial) return true;
        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
        if (newProps.itemInfo !== this.props.itemInfo) return true;
        if (newProps.instance !== this.props.instance) return true;
        if (newProps.comboPreview !== this.props.comboPreview) return true;
        return false;
    }

    render(props) {
        const {
            // passed props
            clearTutorial,
            // connect state props
            info,
            player,
            tutorial,
            vboxInfo,
            itemInfo,
            instance,
            comboPreview,
        } = props;

        // dispaly priority
        // tutorial -> comboPreview -> vboxInfo -> info
        if (tutorial) {
            const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
            if (tutorialStageInfo) return tutorialStageInfo;
        }
        if (comboPreview) return genItemInfo(comboPreview, itemInfo, player);
        if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player);

        if (!info) return false;
        if (info.includes('constructName')) {
            return (
                <div class='info info-item'>
                    <h2> {info.replace('constructName ', '')} </h2>
                    <p> This is the name of your construct. <br />
                        Names are randomly generated and are purely cosmetic. <br />
                        You can change change your construct name in the <b>RESHAPE</b> tab outside of games.
                    </p>
                </div>
            );
        }

        if (info.includes('constructAvatar')) {
            return (
                <div class='info info-item'>
                    <h2> {info.replace('constructAvatar ', '')} </h2>
                    <p> This is your construct avatar. <br />
                        Avatars are randomly generated and are purely cosmetic. <br />
                        You can change your construct avatar in the <b>RESHAPE</b> tab outside of games.
                    </p>
                </div>
            );
        }

        return genItemInfo(info, itemInfo, player, info);
    }
}

module.exports = addState(Info);