import React from 'react';
import { connect } from 'dva';
import NProgress from 'nprogress';
import { withRouter } from 'dva/router';
import { Layout, Loader } from '../components/';
import { Helmet } from 'react-helmet';
import { classnames, config } from '../utils';
import '../themes/index.less';
import './app.less';

const { prefix, openPages } = config;

const { Header, Bread, Footer, Sider, styles } = Layout;
let lastHref;

const App = ({ children, location, dispatch, app, loading }) => {
  const { user, msgCnt, menu, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = app;

  let { pathname } = location;
  pathname = pathname.startsWith('/') ? pathname : `/${pathname}`;
  const { iconFontJS, iconFontCSS, logoSmall } = config;

  const href = window.location.href;

  if (lastHref !== href) {
    NProgress.start();
    if (!loading.global || loading.effects['dashboard/query']) {
      NProgress.done();
      lastHref = href;
    }
  }
  const headerProps = {
    menu,
    user,
    msgCnt,
    dispatch,
    siderFold,
    location,
    isNavbar,
    menuPopoverVisible,
    navOpenKeys,
    switchMenuPopover() {
      dispatch({ type: 'app/switchMenuPopver' });
    },
    logout() {
      dispatch({ type: 'app/logout' });
    },
    switchSider() {
      dispatch({ type: 'app/switchSider' });
    },
    changeOpenKeys(openKeys) {
      dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } });
    },
  };

  const siderProps = {
    menu,
    user,
    dispatch,
    siderFold,
    darkTheme,
    location,
    navOpenKeys,
    logout() {
      dispatch({ type: 'app/logout' });
    },
    changeTheme() {
      dispatch({ type: 'app/switchTheme' });
    },
    changeOpenKeys(openKeys) {
      sessionStorage.setItem(`${prefix}_navOpenKeys`, JSON.stringify(openKeys));
      dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } });
    },
  };

  const breadProps = {
    menu,
  };

  if (openPages && openPages.includes(pathname)) {
    // console.log(pathname, 'addd');
    return (<div>
      <Loader fullScreen={true} spinning={loading.effects['app/query']}/>
      {children}
    </div>);
  }


  // if (pathname === '/login') {
  //   return (<div>
  //     <Loader fullScreen={true} spinning={loading.effects['login/login']}/>
  //     {children}
  //   </div>);
  // }


  return (
    <div>
      <Helmet>
        <title>九毛九SRM系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="icon" href={logoSmall} type="image/x-icon"/>
        {iconFontJS && <script src={iconFontJS}/>}
        {iconFontCSS && <link rel="stylesheet" href={iconFontCSS}/>}
      </Helmet>
      <object
        id="LODOP_OB"
        classID="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0"
        style={{ display: 'none' }}
      >
        <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0"/>
      </object>
      {user && menu && !loading.effects['app/query'] ?
        <div
          className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
          {!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
            <Sider {...siderProps} />
          </aside> : ''}
          <Header {...headerProps} />
          <div className={styles.main} id="main">
            <Bread {...breadProps} location={location}/>
            <div className={styles.container} id="container">
              <div className={styles.content}>
                {/*{user.user && React.cloneElement(children, { user })}*/}
                {children}
              </div>
            </div>
            {/*<Footer />*/}
          </div>
        </div> :
        <Loader fullScreen={true} spinning={loading.effects['app/query']}/>
      }
    </div>
  );
};

export default withRouter(connect(({ app, loading }) => ({ app, loading }))(App));
