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

const LogRocket = require('logrocket');

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

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

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

function stripeKey() {
    if (window.location.host === 'mnml.gg') return 'pk_live_fQGrL1uWww2ot8W1G7vTySAv004ygmnMXq';
    return 'pk_test_Cb49tTqTXpzk7nEmlGzRrNJg00AU0aNZDj';
}

// Redux Store
const store = createStore(
    combineReducers(reducers),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

const events = registerEvents(store);
// store.subscribe(() => console.log(store.getState()));
setupKeys(store);

const ws = createSocket(events);
ws.connect();
events.setWs(ws);

if (process.env.NODE_ENV !== 'development') {
    LogRocket.init('yh0dy3/mnml');
}

const App = () => (
    <Provider store={store}>
        {window.Stripe
            ? <StripeProvider apiKey={stripeKey()}>
                <Mnml />
            </StripeProvider>
            : <Mnml />
        }
    </Provider>
);

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