const preact = require('preact');
const jdenticon = require('jdenticon');
const logger = require('redux-diff-logger');

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

const reducers = require('./reducers');
const actions = require('./actions');
const setupKeys = require('./keyboard');
const createSocket = require('./socket');
const registerEvents = require('./events');
// const testGame = require('./test.game');

const Header = require('./components/header.container');
const Body = require('./components/body.component');

// Redux Store
const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
const store = createStoreWithMiddleware(
    combineReducers({
        account: reducers.accountReducer,
        activeCryp: reducers.activeCrypReducer,
        activeSkill: reducers.activeSkillReducer,
        activeVar: reducers.activeVarReducer,
        combiner: reducers.combinerReducer,
        cryps: reducers.crypsReducer,
        game: reducers.gameReducer,
        info: reducers.infoReducer,
        instance: reducers.instanceReducer,
        instances: reducers.instancesReducer,
        ping: reducers.pingReducer,
        player: reducers.playerReducer,
        reclaiming: reducers.reclaimingReducer,
        resolution: reducers.resolutionReducer,
        selectedCryps: reducers.selectedCrypsReducer,
        vboxInfo: reducers.vboxInfoReducer,
        vboxHidden: reducers.vboxHiddenReducer,
        showLog: reducers.showLogReducer,
        ws: reducers.wsReducer,
    })
);


document.fonts.load('16pt "Jura"').then(() => {
    const events = registerEvents(store);
    // store.subscribe(() => console.log(store.getState()));
    setupKeys(store);

    const ws = createSocket(events);
    store.dispatch(actions.setWs(ws));
    ws.connect();

    // events.setGame(testGame);
    // ws.clearGameStateTimeout();

    // tells jdenticon to look for new svgs and render them
    // so we don't have to setInnerHtml or manually call update
    jdenticon.config = {
        replaceMode: 'observe',
    };

    const Cryps = () => (
        <section className='cryps' >
            <Header />
            <Body />
        </section>
    );

    const Main = () => (
        <Provider store={store}>
            <Cryps />
        </Provider>
    );

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