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 fizzyText = require('../lib/fizzy-text');
const createSocket = require('./socket');

const CrypContainer = require('./components/cryp.container');
const LoginContainer = require('./components/login.container');
const Navbar = require('./components/navbar');

// Redux Store
const store = createStore(
    combineReducers({
        account: reducers.accountReducer,
        cryp: reducers.crypReducer,
        ws: reducers.wsReducer,
    }),
);

store.subscribe(() => console.log(store.getState()));

const ws = createSocket(store);
store.dispatch(actions.setWs(ws));

// 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>
        <Navbar />
        <div id="fizzytext" />
        <LoginContainer />
        <CrypContainer />
    </section>
);

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

preact.render(<Main />, document.body);

fizzyText('cryps');