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

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

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

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

        function sendInstanceReady() {
            return ws.sendInstanceReady(instance.id);
        }

        return {
            instance,
            account,
            sendInstanceReady,
        };
    },
);

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

function Faceoff(props) {
    const {
        instance,
        account,
        sendInstanceReady,
    } = 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 classes = `team player ${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 classes = `team opponent ${team.ready ? 'ready' : ''}`

        return (
            <div class={classes}>
                {constructs}
            </div>
        );
    }
    function faceoffText() {
        if (!instance.winner) {
            const zero = Date.parse(instance.phase_start);
            const now = Date.now();
            const end = Date.parse(instance.phase_end);
            const timerPct = instance.phase_end
                ? ((now - zero) / (end - zero) * 100)
                : 100;
            const fight = timerPct > 10 ? <h1> FIGHT </h1> : null;
            return (
                <div class="faceoff-text"> 
                    <h1> {otherTeam.name} </h1>
                    <h1> vs </h1>
                    <h1> {playerTeam.name} </h1>
                    {fight}
                </div>
            );
        }

        if (instance.winner === playerTeam.id) {
            return (
                <div class="faceoff-text"> 
                    <h1> You are the champion </h1>
                </div>
            )
        }

        return (
            <div class="faceoff-text"> 
                <h1> You lose </h1>
            </div>
        )
    }

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

module.exports = addState(Faceoff);