const preact = require('preact');
const range = require('lodash/range');

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

const { STATS } = require('../utils');

// const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];

function GamePanel(props) {
    const {
        game,
        activeSkill,
        setActiveSkill,
        selectSkillTarget,
        account,
        showLog,
        toggleLog,
        quit,
    } = props;

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

    const header = (
        <div className="instance-hdr">
            <button
                className="game-back-btn instance-btn instance-ui-btn left"
                onClick={quit}>
                Back
            </button>
            <div className="spacer">
                <div>&nbsp;</div>
            </div>
            <button
                className="game-back-btn instance-btn instance-ui-btn left"
                onClick={() => toggleLog(!showLog)}>
                {showLog ? 'Game' : 'Log'}
            </button>
        </div>
    );

    if (showLog) {
        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
        return (
            <main>
                {header}
                <div className="logs">
                    {logs}
                </div>
            </main>
        );
    }

    function findCryp(id) {
        const team = game.teams.find(t => t.cryps.find(c => c.id === id));
        if (team) return team.cryps.find(c => c.id === id);
        return null;
    }

    const otherTeams = game.teams.filter(t => t.id !== account.id);

    const playerTeam = game.teams.find(t => t.id === account.id);

    function stackElement(c, i) {
        let skills = game.stack.filter(s => s.source_cryp_id === c.id).map((s, j) => {
            const target = findCryp(s.target_cryp_id);
            return (
                <div key={j}>{s.skill} -> {target.name}</div>
            );
        });

        if (!skills.length) skills = (<div>&nbsp;</div>);

        return (
            <div
                key={i}
                className="stack-line">
                {skills}
            </div>
        );
    }

    function Cryp(cryp) {
        const ko = cryp.hp.value === 0 ? 'ko' : '';

        const skills = range(0, 4).map(i => {
            const s = cryp.skills[i];
            if (!s) {
                return (
                    <button
                        disabled='true'
                        key={i}
                        className='cryp-skill-btn disabled'>
                        <span>&nbsp;</span>
                    </button>
                );
            }

            const cdText = cryp.skills[i].cd > 0
                ? `- ${s.cd}`
                : '';

            const highlight = activeSkill
                ? activeSkill.crypId === cryp.id && activeSkill.skill === s
                : false;

            return (
                <button
                    key={i}
                    disabled={!!cdText || ko}
                    className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
                    type="submit"
                    onClick={() => setActiveSkill(cryp.id, s.skill)}>
                    {s.skill} {cdText}
                </button>
            );
        });

        const stats = Object.values(STATS).map((s, i) => (
            <figure key={i} alt={s.stat}>
                {s.svg(`stat-icon ${s.colour}`)}
                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
            </figure>
        ));


        return (
            <div
                key={cryp.id}
                style={ activeSkill ? { cursor: 'pointer' } : {}}
                className={`cryp-box ${ko}`} >
                <div className="cryp-box-top">
                    <figure
                        className="img"
                        onClick={() => selectSkillTarget(cryp.id)} >
                        {molecule}
                        <figcaption>{cryp.name}</figcaption>
                    </figure>
                    <div className="skills">
                        {skills}
                    </div>
                </div>
                <div className="cryp-box">
                    {stats}
                </div>
            </div>
        );
    }

    function PlayerTeam(team) {
        const cryps = team.cryps.map(c => Cryp(c));

        return (
            <div className="team-player cryp-list">
                {cryps}
            </div>
        );
    }

    function OpponentCryp(cryp, i) {
        const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
            <figure key={j} alt={s.stat}>
                {s.svg(`stat-icon ${s.colour}`)}
                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
            </figure>
        ));

        return (
            <div
                key={i}
                className="cryp-box"
                style={ activeSkill ? { cursor: 'pointer' } : {}}
                onClick={() => selectSkillTarget(cryp.id)} >
                <div className="cryp-box-top">
                    <figure className="img">
                        {molecule}
                        <figcaption>{cryp.name}</figcaption>
                    </figure>
                </div>
                <div className="stats">
                    {stats}
                </div>
            </div>
        );
    }


    function OpponentTeam(team) {
        const cryps = team.cryps.map(OpponentCryp);
        return (
            <div className="cryp-list" >
                {cryps}
            </div>
        );
    }

    const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));


    return (
        <main>
            {header}
            {PlayerTeam(playerTeam, setActiveSkill)}
            <div className="selected-skills">
                {selectedSkills}
            </div>
            <div className="team-opponent cryp-list">
                {otherTeams.map(OpponentTeam)}
            </div>
        </main>
    );
}

module.exports = GamePanel;