const preact = require('preact');
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,
        vboxHighlight: reducers.vboxHighlightReducer,
        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();

    const Cryps = () => (
        <main className="cryps" >
            <Header />
            <nav>
                <h2>Team</h2>
                <button>zzz</button>
                <button>muji</button>
                <button>kaast</button>
                <h2>Instances</h2>
                <button>
                    six
                </button>
                <button>
                    grep
                </button>
            </nav>
            <Body />
        </main>
    );

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

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