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

const { ConstructAvatar } = require('./construct');

const addState = connect(
    function receiveState(state) {
        const {
            instance,
            account,
        } = state;

        return {
            instance,
            account,
        };
    }
);

function FaceoffConstruct(args) {
    const {
        construct,
    } = args;

    return (
        <div class='game-construct'>
            <div class="left"></div>
            <div class="right">
                <h3 class="name"> {construct.name} </h3>
                <ConstructAvatar construct={construct} />
            </div>
        </div>
    );
}

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

    render(props) {
        const {
            instance,
            account,
        } = props;

        if (!instance) return <div>...</div>;

        const otherTeam = instance.players.find(t => t.id !== account.id);
        const playerTeam = instance.players.find(t => t.id === account.id);

        function PlayerTeam(team) {
            const constructs = team.constructs.map((c, i) =>
                <FaceoffConstruct key={c.id} construct={c}/>);

            const winner = instance.winner === team.id;
            const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
            return (
                <div class={classes}>
                    {constructs}
                </div>
            );
        }


        function OpponentTeam(team) {
            const constructs = team.constructs.map((c, i) =>
                <FaceoffConstruct key={c.id} construct={c}/>);

            const winner = instance.winner === team.id;
            const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`;

            return (
                <div class={classes}>
                    {constructs}
                </div>
            );
        }
        function faceoffText() {
            if (!instance.winner) {
                if (instance.phase === 'Finished') return (
                    <div class="faceoff-text">
                        <div class="cancelled"> game cancelled </div>
                    </div>
                );

                return (
                    <div class="faceoff-text">
                        <div class="opponent-text"> {otherTeam.name} </div>
                        <div class="vs"> vs </div>
                        <div class="player-text"> {playerTeam.name} </div>
                    </div>
                );
            }
            const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
            return (
                <div class="faceoff-text winner">
                    <div> {winner.name} </div>
                    <div> wins </div>
                </div>
            )

        }

        return (
            <main class="faceoff">
                {OpponentTeam(otherTeam)}
                {faceoffText()}
                {PlayerTeam(playerTeam)}
            </main>
        );
    }
}

module.exports = addState(Faceoff);