import * as React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux'
import * as ReactDOM from 'react-dom'
import 'rxjs'
import logger from 'redux-logger'
import {default as thunk} from 'redux-thunk'
import { Provider } from 'react-redux'
import { combineEpics, createEpicMiddleware } from 'redux-observable'
import { createRxHttpEpic } from 'redux-rx-http'
import { cosmoUiEpics } from './epics'
import { cosmoUiReducers, FormState, DropdownState } from './reducers'
import { Container, ModalRoot } from './web'
import {
    FormExample,
    TrayExample,
    DropdownExample,
    ModalExample,
    HeaderExample,
    exampleReducer,
} from './example'
import { composeWithDevTools } from 'redux-devtools-extension';

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

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

const rxHttpEpic = createRxHttpEpic(mkHttpConfig)

const store = createStore(
    combineReducers({
        ...cosmoUiReducers,
        example: exampleReducer,
    }),
    composeEnhancers(
        applyMiddleware(
            createEpicMiddleware(combineEpics(cosmoUiEpics, rxHttpEpic)),
            logger,
            thunk,
        ),
    ),
)

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

interface AppProps { }

export interface AppState {
    example: { vehicles: any[], job: any }
    forms: FormState,
    dropdowns: DropdownState
}

class App extends React.Component<AppProps, AppState> {

    public render(): JSX.Element {

        console.log('RENDER APP', store)
        return (
            <Provider store={store}>
                <Container id="testContainerId">
                    <ModalRoot />
                    <TrayExample />
                    <HeaderExample />
                    <DropdownExample />
                    <FormExample />
                    <ModalExample />
                </Container>
            </Provider>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('mount'),
);