import React from 'react';
import ReactDOM from 'react-dom';

import {
  Router,
  Route,
  useRouterHistory
} from 'react-router';
import {
  createHashHistory
} from 'History';
import {
  Provider
} from 'mobx-react';
import {
  RouterStore,
  syncHistoryWithStore
} from 'mobx-react-router';

const browserHistory = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});

const routingStore = new RouterStore();

const history = syncHistoryWithStore(browserHistory, routingStore);
window.weaHistory = history;

// 主题
import {
  Login,
  Theme,
  store as portalThemeStore
} from 'weaPortalTheme';
// 主题多语言
import {
  WeaLocaleProvider
} from 'ecCom';
const getLocaleLabel = WeaLocaleProvider.getLocaleLabel.bind(this, 'theme');

const libs = [
  'weaPortal', // 门户
  'weaAlbum', // 相册
  'weaBlog', // 微博
  'weaCowork', // 协作
  'weaCpt', // 资产
  'weaCrm', // 客户
  'weaCrmReport', // 客户报表
  'weaCube', // 建模
  'weaDemo', // demo示例
  'weaDevelop', // 二次开发
  'weaDoc', // 文档
  'weaEmail', // 邮件
  'weaESearch', // 微搜
  'weaFna', // 财务
  'weaFnaSpecial', // 财务
  'weaFnaMulit', // 财务 全面预算
  'weaHrm', // 人力
  'weaInte', // 集成
  'weaMeeting', // 会议
  'weaOdoc', // 公文
  'weaPrj', // 项目
  'weaSmallApp', // 小模块
  'weaWorkflow', // 流程
  'weaWorkplan', // 日程
  'weaWorkrelate', // 执行力
  'weaPortrait', // 组织画像
  'weaCar', //车辆前后端
  'weaContract_zs', //合同
  'weaCustomSetting', // 个性化设置
  'weaHrmAttendance', //新考勤模块
  'weaHrmTax', //新个税
  'weaHrmScAirportAddressBook', //四川航空通讯录
  'weaEdcApp',//数据中心前端
  'weaEdcAppV2',
  'weaCompared',// '对比'
  'weaOrganization', //组织
];

const getModules = (names = []) => {
  let store = {};
  const route = [];
  names.forEach(name => {
    const module = window[name];
    if (module && module.store && module.Route) {
      store = { ...store,
        ...module.store
      };
      route.push(module.Route);
    }
  });
  return {
    store,
    route,
  };
};

const stores = {
  routing: routingStore,
  ...portalThemeStore,
  ...getModules(libs).store,
};

const Report = props => <div style={{ height: '100%' }}>{props.children}</div>;

class Root extends React.Component {
  render() {
    return (
      <Provider {...stores}>
        <Router history={history}>
          <Route path='/' component={Login} />
          <Route path='main' onEnter={getLocaleLabel} component={Theme}>
            <Route path='report' component={Report}>
              {getModules(libs).route}
            </Route>
            {getModules(libs).route}
          </Route>
        </Router>
      </Provider>
    );
  }
}

ReactDOM.render(<Root />, document.getElementById('container'));