const preact = require('preact');
const { STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
// const { animationDivs } = require('../animations');
const GameConstruct = require('./game.construct');

function GamePanel(props) {
    const {
        game,
        account,
        resolution,
        setActiveSkill,
        setActiveConstruct,
        sendInstanceState,
        sendGameReady,
        showLog,
        toggleLog,
        skip,
        quit,
    } = props;

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

    // if (showLog) {
    //     const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
    //     return (
    //         <main className="game">
    //             <div className="instance-hdr">
    //                 <button
    //                     className="game-btn instance-btn instance-ui-btn left"
    //                     onClick={() => toggleLog(!showLog)}>
    //                     Game
    //                 </button>
    //                 <div className="spacer">
    //                     <div>&nbsp;</div>
    //                 </div>
    //             </div>
    //             <div className="logs">
    //                 {logs}
    //             </div>
    //         </main>
    //     );
    // }

    function actionClick() {
        if (game.phase === 'Finish') {
            sendInstanceState(game.instance);
            quit();
            return true;
        }

        if (resolution) {
            return skip();
        }

        return sendGameReady();
    }

    const otherTeams = game.players.filter(t => t.id !== account.id);
    const playerTeam = game.players.find(t => t.id === account.id);

    let actionText = 'Ready';
    let actionStyles = 'instance-btn instance-ui-btn right';
    if (game.phase === 'Finish') actionText = 'Done';
    if (resolution) actionText = 'Skip';
    if (actionText === 'Ready' && playerTeam.ready) actionStyles += ' ready';

    const header = (
        <div className="top">
            <button
                className={actionStyles}
                onClick={() => actionClick()}>
                {actionText}
            </button>
        </div>
    );

    function findConstruct(id) {
        const team = game.players.find(t => t.constructs.find(c => c.id === id));
        if (team) return team.constructs.find(c => c.id === id);
        return null;
    }

    const zero = Date.parse(game.phase_start);
    const now = Date.now();
    const end = Date.parse(game.phase_end);
    const timerPct = ((now - zero) / (end - zero) * 100);
    const displayPct = resolution || game.phase === 'Finish'
        ? 0
        : Math.min(timerPct, 100);

    const displayColour = playerTeam.ready
        ? 'forestgreen'
        : timerPct > 80
            ? 'red'
            : 'whitesmoke';

    const timerStyles = {
        width: `${displayPct}%`,
        background: displayColour,
    };

    const timer = (
        <div className="timer-container">
            <div className="timer" style={timerStyles} >&nbsp;</div>
        </div>
    );

    function PlayerTeam(team) {
        const constructs = team.constructs.map(c =>
            <GameConstruct key={c.id} construct={c} player={true} />);
        return (
            <div className="team player">
                {constructs}
            </div>
        );
    }

    function OpponentTeam(team) {
        const constructs = team.constructs.map(c =>
            <GameConstruct key={c.id} construct={c} player={false} />);
        return (
            <div className="team opponent">
                {constructs}
            </div>
        );
    }

    const gameClasses = `game ${resolution ? 'resolving': ''}`;

    function gameClick(e) {
        e.stopPropagation();
        setActiveConstruct(null);
    }

    return (
        <main className={gameClasses} onClick={gameClick} >
            {header}
            {timer}
            {otherTeams.map(OpponentTeam)}
            {PlayerTeam(playerTeam, setActiveSkill)}
        </main>
    );
}

module.exports = GamePanel;