const preact = require('preact');
const { Provider } = require('preact-redux');
const { createStore, combineReducers } = require('redux');

const reducers = require('./reducers');
const actions = require('./actions');
const createSocket = require('./animations.socket');

// const TrippyTriangle = require('./components/svgs/trippy.triangle');
// const Amplify = require('./components/svgs/amplify');
// const Hex = require('./components/svgs/hex');
const Game = require('./components/game');
const testGameBuilder = require('./test.game');

const testGame = testGameBuilder('8552e0bf-340d-4fc8-b6fc-cccccccccccc');
const testAccount = {
    id: '8552e0bf-340d-4fc8-b6fc-cccccccccccc',
    name: 'ntr',
};

// Redux Store
const store = createStore(
    combineReducers(reducers),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

store.dispatch(actions.setAccount(testAccount));
store.dispatch(actions.setGame(testGame));

function animationsNav(ws) {
    function useSkill(skill) {
        const ateam = Math.round(Math.random());
        const bteam = Math.round(Math.random());
        const acon = Math.floor(Math.random() * 3);
        const bcon = Math.floor(Math.random() * 3);

        const a = testGame.players[ateam].constructs[acon].id;
        const b = testGame.players[bteam].constructs[bcon].id;

        return ws.sendDevResolve(a, b, skill);
    }

    return SKILLS.map((s, i) => (
        <button
            key={i}
            onClick={() => useSkill(s)}>
            {s}
        </button>
    ));
}

document.fonts.load('16pt "Jura"').then(() => {
    const ws = createSocket(store);
    ws.connect();

    const Animations = () => (
        <Provider store={store}>
            <div id="mnml" class="animations-test">
                <nav>
                    {animationsNav(ws)}
                </nav>
                <Game />
            </div>
        </Provider>
    );

    // eslint-disable-next-line
    preact.render(<Animations />, document.body);
});

const SKILLS = [
    'Electrocute',
    'ElectrocuteTick',
    'Haste',
    'HasteStrike',
    'Heal',
    'HybridBlast',
    'Hybrid',
    'Intercept',
    'Invert',
    'Link',
    'Purge',
    'Purify',
    'Recharge',
    'Reflect',
    'Restrict',
    'Ruin',
    'Silence',
    'Siphon',
    'SiphonTick',
    'Slay',
    'Sleep',
    'Strike',
    'Stun',
    'Sustain',
    'Triage',
    'TriageTick',
    'Absorb',
    'Absorption',
    'Amplify',
    'Attack',
    'Banish',
    'Bash',
    'Blast',
    'Block',
    'Break',
    'Buff',
    'Chaos',
    'CounterAttack',
    'Counter',
    'Curse',
    'Debuff',
    'Decay',
    'DecayTick',
    'Electrify',
];