/**
 * index.js
 *
 * This is the entry file for the application, only setup and boilerplate code.
 * Usually, you don't need to edit this file. 
 *
 * Modify config.js, routes.js and reducers.js instead...
 */

import 'whatwg-fetch'; //polyfill

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Router, browserHistory, applyRouterMiddleware } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { useScroll } from 'react-router-scroll';

import { Provider } from 'react-redux';
import { IntlProvider } from 'react-intl-redux'
import { initIntl, intlSelector } from 'lib/i18n';

//application assembly
import configureStore from './store.js';
import createRoutes from './routes.js';
import initConfig from './config.js';

//default styles
require("./index.scss");
require("styles/index.scss");

//first, prepare application configuration
//TODO fix default config
initConfig().then((cfg = {}) => initIntl(cfg.i18n.locale, cfg.i18n.defaultLocale).then( (intl) => {

	//app data
	let routes = createRoutes("/", cfg);
	let store = configureStore({ ...cfg.store, intl }, browserHistory);
	let history = browserHistory;

	//render application
	let render = (messages) => {
		ReactDOM.render(
			<Provider store={ store }>
				<IntlProvider intlSelector={ intlSelector }>
					<Router history={ history } routes={ routes } render={ applyRouterMiddleware(useScroll()) }/>
				</IntlProvider>
			</Provider>, 
			document.getElementById('root')
		);
	};

	//render application
	render({});
}));

