/* tslint:disable:jsx-no-lambda */
import * as React from 'react';
import { compose } from 'redux'
import { Provider, connect } from 'react-redux'
import { Switch, Route, Redirect } from 'react-router'
import { Link } from 'react-router-dom'
import { ConnectedRouter, routerMiddleware } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import 'rxjs'
import thunk from 'redux-thunk'
import { combineEpics, createEpicMiddleware } from 'redux-observable'
import { createRxHttpEpic } from 'redux-rx-http'
import { composeWithDevTools } from 'redux-devtools-extension';
import {
    StyleProvider,
    StylableComponent,
    createCosmoUiReducersWithTheme,
    cosmoUiEpics,
    Row,
    defaultTheme,
    ModalRoot,
    NotificationRoot,
} from './components'
import { AppState, exampleReducer, Sidebar, Routes  } from './docs'

/**
 * redux-localstorage service
 */
import { default as persistState, mergePersistedState, StorageAdapter } from 'redux-localstorage'
import * as adapter from 'redux-localstorage/lib/adapters/localStorage';
import filter from 'redux-localstorage-filter'
import * as debounce from 'redux-localstorage-debounce'

const styles = require('../src/components/styles/cosmoui.scss')

const fullHeight: any = { height: '100%' }
const scroll: any = { overflowY: 'scroll' }

const composeEnhancers = composeWithDevTools({
    // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});

const mkHttpConfig = (state: AppState) => ({
    headers: {
        'Auth-Token': AppOptions.QAS_TOKEN,
    },
    baseUrl: AppOptions.QAS_URL,
})

const rxHttpEpic = createRxHttpEpic(mkHttpConfig)

const history = createHistory()
const routeMiddleware = routerMiddleware(history)

const rootReducer = combineReducers({
    ...createCosmoUiReducersWithTheme(defaultTheme),
    example: exampleReducer,
})

const hydratedReducer = compose(mergePersistedState())(rootReducer);

/**
 * An adapter for the browser's native localstorage
 * which is wrapped with methods such as filter and debounce
 */
const storage: any = compose(
    (debounce as any)(100),
    filter(['panels']),
)(adapter(window.localStorage));

const store = createStore(
    hydratedReducer,
    composeEnhancers(
        applyMiddleware(
            createEpicMiddleware(combineEpics(cosmoUiEpics, rxHttpEpic)),
            thunk,
        ),
        persistState(storage, 'cosmo'),
    ),
)

console.log('INITIALIZE STORE', store.getState())

export default class App extends React.Component <any, any> {

    public render(): JSX.Element {
        console.log('RENDER APP', store)
        return (
            <Provider store={store}>
                <StyleProvider>
                    <ConnectedRouter history={history} >

                        <Row
                            justify="flex-start"
                            align="flex-start"
                            fullWidth
                            style={...fullHeight}>
                            <ModalRoot />
                            <NotificationRoot />
                            <Sidebar />
                            <Routes />
                        </Row>
                    </ConnectedRouter>
                </StyleProvider>
            </Provider>
        )
    }
}
/* tslint:enable:jsx-no-lambda */