import React, { Component, PropTypes } from 'react';
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import injectTapEventPlugin from 'react-tap-event-plugin';
import './index.less';
import 'react-object-inspector/react-object-inspector.css';

import { blackLionLog, initBlackLionCaching } from 'ih-black-lion';
import SessionStorage from '../src/utils/asyncSessionStorage';
import ServiceProvider from './services/ServiceProvider.jsx';
import PageletProvider from './pagelets/PageletProvider.jsx';
import AcademicTabProvider from '../src/tabs/AcademicTabProvider.jsx';
import DashboardTabProvider from '../src/tabs/DashboardTabProvider.jsx';
import AdmissionsTabProvider from '../src/tabs/AdmissionsTabProvider.jsx';
import FinanceTabProvider from '../src/tabs/FinanceTabProvider.jsx';

import { Router, Route, Link } from 'react-router';
import { createHashHistory as createHistory } from 'history';

injectTapEventPlugin();

// blackLionLog.setLevel('silent', true);

const { arrayOf, node, oneOfType } = PropTypes;

class IhPortal extends Component {
  render() {
    return (
      <div key="ih-sandbox">
        <div id="Nav">
          <ul>
            <li>
              <Link to="/services">Services</Link>
            </li>
            <li>
              <Link to="/pagelets">Pagelets</Link>
            </li>
            <li>
              <Link to="/dashboardtab">Dashboard Tab</Link>
            </li>
            <li>
              <Link to="/academictab">Academic Tab</Link>
            </li>
            <li>
              <Link to="/admissionstab">Admissions Tab</Link>
            </li>
            <li>
              <Link to="/financetab">Finance Tab</Link>
            </li>
          </ul>
        </div>
        {this.props.children}
      </div>
    );
  }
}

IhPortal.propTypes = {
  children: oneOfType([
    node,
    arrayOf(node),
  ]),
};

const routes = (
  <Route path="/" component={IhPortal}>
    <Route path="services" component={ServiceProvider} />
    <Route path="pagelets" component={PageletProvider} />
    <Route path="dashboardtab" component={DashboardTabProvider} />
    <Route path="academictab" component={AcademicTabProvider} />
    <Route path="admissionstab" component={AdmissionsTabProvider} />
    <Route path="financetab" component={FinanceTabProvider} />
  </Route>
);

/**
 * Sets up an instance of a BlackLion store that gets initially hydrated by sessionStorage.
 */
initBlackLionCaching(
  (blackLion, blackLionPersistor) => {
    ReactDOM.render((
        <div key="top-level-node">
          <Provider key="Provider" store={blackLion}>
            <Router key="Router" history={createHistory()}>{routes}</Router>
          </Provider>
        </div>
      ), document.getElementById('app')
    );

    let clearCacheInterval = setInterval(() => {
      blackLionPersistor.purgeAll();
    }, 10 * 60 * 1000);
  },
  {
    blacklist: [],
    storage: SessionStorage,
    skipRestore: true,
  }
);