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

const { Provider, connect } = require('preact-redux');
const { createStore, combineReducers } = require('redux');
const { StripeProvider } = require('react-stripe-elements');

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

const Mnml = require('./components/mnml');

// 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);
    ws.connect();
    events.setWs(ws);

    const App = () => (
        <Provider store={store}>
            <StripeProvider apiKey="pk_test_PiLzjIQE7zUy3Xpott7tdQbl00uLiCesTa">
                <Mnml />
            </StripeProvider>
        </Provider>
    );

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