const preact = require('preact');
const anime = require('animejs').default;

const AttackCharge = require('./anims/attack.charge');

const Amplify = require('./anims/amplify');
const Blast = require('./anims/blast');
const banish = require('./anims/banish');
const Bash = require('./anims/bash');
const Block = require('./anims/block');
const Buff = require('./anims/buff');
const Debuff = require('./anims/debuff');
const Decay = require('./anims/decay');
const Curse = require('./anims/curse');
const Haste = require('./anims/haste');
const Stun = require('./anims/stun');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
const Strike = require('./anims/strike');
const Chaos = require('./anims/chaos');
const Slay = require('./anims/slay');
const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick');

// const Test = require('./anims/test');

const { removeTier, getCombatText } = require('../utils');

const colours = {
    red: '#a52a2a',
    green: '#1FF01F',
    blue: '#3498db',
    purple: '#A25AC1',
    yellow: '#d1c86a',
    cyan: '#6AD1BF',
    white: '#FFFFFF',
};

const { TIMES } = require('../constants');

function animations(props) {
    const { game, account, resolution, player, construct } = props;
    if (!resolution) return false;
    const [, event] = resolution.event;
    if (!event.skill) return false;
    if (!resolution.target) return false;

    // source animation
    if (resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
        const playerTeam = game.players.find(t => t.id === account.id);
        const playerTeamIds = playerTeam.constructs.map(c => c.id);
        const otherTeam = game.players.find(t => t.id !== account.id);
        const otherTeamIds = otherTeam.constructs.map(c => c.id);

        const sourceIsPlayer = playerTeamIds.includes(construct.id);
        const targetIsPlayer = playerTeamIds.includes(resolution.target.id);

        const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);

        const y = sameTeam
            ? 0
            : targetIsPlayer
                ? 1
                : -1;

        const i = sourceIsPlayer
            ? playerTeamIds.findIndex(c => c === construct.id)
            : otherTeamIds.findIndex(c => c === construct.id);

        const j = targetIsPlayer
            ? playerTeamIds.findIndex(c => c === resolution.target.id)
            : otherTeamIds.findIndex(c => c === resolution.target.id);

        const x = j - i;
        anime({
            targets: [document.getElementById(construct.id)],
            translateY: y * 200,
            translateX: x * 200,
            easing: 'easeInOutElastic',
            direction: 'alternate',
            duration: TIMES.SOURCE_DURATION_MS,

        });
    }

    if (resolution.target.id !== construct.id) return false;

    // target animation
    const anim = text => {
        console.log(text);
        if (!text || !resolution.sequence[0].includes('END_SKILL')) return false;
        const skill = removeTier(text);

        // if (skill === 'Bash' && type === 'Damage') return false;
        switch (skill) {
            case 'Attack': return <Strike id={construct.id} team={player} colour={colours.white}/>;
            case 'Amplify': return <Amplify/>;
            case 'Banish': return banish(construct.id);
            case 'Bash': return <Bash />;
            case 'Block': return <Block />;
            case 'Buff': return <Buff />;
            case 'Curse': return <Curse />;
            case 'Blast': return <Blast id={construct.id} team={player}/>;
            case 'Debuff': return <Debuff />;
            case 'Decay': return <Decay />;
            case 'Strike': return <Strike id={construct.id} team={player} colour={colours.red}/>;
            case 'Chaos': return <Chaos id={construct.id} team={player}/>;
            case 'Slay': return <Slay id={construct.id} team={player} />;
            case 'Heal': return <Heal id={construct.id} team={player} />;
            case 'Hex': return <Hex />;
            case 'Haste': return <Haste />;
            case 'Siphon': return <Siphon id={construct.id} team={player} />;
            case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
            case 'Stun': return <Stun />;
            default: return false;
        }
    };

    const combatAnim = anim(event.skill);
    if (combatAnim) {
        return (
            <div class={'combat-anim'}>
                {combatAnim}
            </div>
        );
    }

    return (
        <div></div>);
}

module.exports = animations;