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

const { Provider } = require('react-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 Main = require('./components/main');
const Nav = require('./components/nav');

// Redux Store
const store = createStore(
    combineReducers(reducers)
);

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();

    const Mnml = () => (
        <div id="mnml" >
            <input type="checkbox" id="toggle-nav"/>
            <label id="toggle-nav-label" htmlFor="toggle-nav"><i className="fa fa-bars"></i></label>
            <Header />
            <Nav />
            <Main />
        </div>
    );

    const App = () => (
        <Provider store={store}>
            <Mnml />
        </Provider>
    );

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