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 Curse = require('./anims/curse');
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 } = require('../utils');

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

const SOURCE_ANIM_MS = 1000;

const TARGET_ANIM_DELAY_MS = 500;
const TARGET_ANIM_MS = 1000;

function animations(props) {
    const { resolution, stage, player, construct, game, account } = props;

    if (!resolution) return false;
    const [type, event] = resolution.event;
    if (!event.skill) return false;
    if (!resolution.target) return false;

    console.log(resolution);

    // source animation
    if (resolution.source.id === construct.id) {
        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: SOURCE_ANIM_MS,
        });
    }

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

    // target animation
    const anim = text => {
        console.log(text);
        if (!text) return false;
        const skill = removeTier(text);

        if (skill === 'Bash' && type === 'Damage') return false;
        switch (skill) {
            case 'Attack': return <Strike id={construct.id} stage={stage} 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} stage={stage} team={player}/>;
            case 'Debuff': return <Debuff />;
            case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
            case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
            case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
            case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
            case 'Hex': return <Hex />;
            case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
            case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
            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;
