const preact = require('preact');
const jdenticon = require('jdenticon');

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

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

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

// Redux Store
const store = createStore(
    combineReducers({
        account: reducers.accountReducer,
        activeSkill: reducers.activeSkillReducer,
        combiner: reducers.combinerReducer,
        cryps: reducers.crypsReducer,
        game: reducers.gameReducer,
        info: reducers.infoReducer,
        instance: reducers.instanceReducer,
        instances: reducers.instancesReducer,
        reclaiming: reducers.reclaimingReducer,
        selectedCryps: reducers.selectedCrypsReducer,
        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();

    // 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);
});
