const preact = require('preact');

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

const Amplify = require('./anims/amplify');
const Blast = require('./anims/blast');
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',
};


function animations(props) {
    const { combatTextClass, combatText, stage, player, construct } = props;
    const anim = text => {
        if (stage === 'START_SKILL') {
            const skill = removeTier(text);
            switch (skill) {
                // Attack Base
                case 'Attack': return <AttackCharge id={construct.id} team={player} colour={colours.white}/>;
                case 'Strike': return <AttackCharge id={construct.id} team={player} colour={colours.red}/>;
                case 'Heal': return <AttackCharge id={construct.id} team={player} colour={colours.green}/>;
                case 'Blast': return <AttackCharge id={construct.id} team={player} colour={colours.blue}/>;
                case 'Chaos': return <AttackCharge id={construct.id} team={player} colour={colours.purple}/>;
                case 'Slay': return <AttackCharge id={construct.id} team={player} colour={colours.yellow}/>;
                case 'Siphon': return <AttackCharge id={construct.id} team={player} colour={colours.cyan}/>;
                // Stun Base
                // Block Base
                // Buff Base
                // Debuff Base
                default: return false;
            }
        } else if (stage === 'END_SKILL') {
            const skill = removeTier(text);
            switch (skill) {
                case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
                case 'Amplify': return <Amplify/>;
                case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
                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}/>;
                default: return false;
            }
        }
        return false;
    };

    if (combatText) {
        const combatAnim = anim(combatText);
        if (combatAnim) {
            return (
                <div class='combat-anim'>
                    {combatAnim}
                </div>
            );
        }
        return (
            <div class={combatTextClass}>
                {combatText}
            </div>
        );
    }

    /*
    return (
        <div class={combatTextClass}>
            <Test id={construct.id} stage={stage} team={player}/>
        </div>
    );
    */

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

module.exports = animations;