import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { push, replace, goBack } from 'react-router-redux';
import { autobind } from 'core-decorators';

import '../styles/global/index.less';
import { initDataFromServer, updateEnterMenuId, updateQuickMenu, initDataFromServerNoMenu } from '../actions/global';
import { longRunExec } from '../system/longRunOpt';
import { getValueByKey } from '../utils/MapUtils';
import createLayout, { CoreLayout } from '../layoutFrameWork';

class App extends React.Component {
  constructor(props) {
    super(props);
    const defaultNavBarStatus = getValueByKey(this.props.routing, null, 'locationBeforeTransitions', 'pathname') === '/';
    this.state = {
      navBarStatus: defaultNavBarStatus
    };
  }

  componentWillReceiveProps(nextProps) {
    const newPathName = getValueByKey(nextProps.routing, null, 'locationBeforeTransitions', 'pathname');
    const oldPathName = getValueByKey(this.props.routing, null, 'locationBeforeTransitions', 'pathname');
    if (newPathName !== oldPathName && newPathName !== '/') {
      this.setState({
        navBarStatus: false
      });
    }
  }

  componentWillMount() {
    if (!this.props.isInit) {
      if (!window.__showLogin) {
        // 不需要登陆 则
        this._initData();
      } else if (window.__loginCallBack) {
        this._initData().then(() => window.__initPage && window.__initPage());
      } else {
        window.__initApp = this._initData;
      }
    }
  }

  @autobind
  _initData() {
    return longRunExec(() => {
      if (!this.props.query || this.props.query.s !== '1') {
        return this.props.actions.initDataFromServer();
      }
      return this.props.actions.initDataFromServerNoMenu();
    });
  }

  @autobind
  _switchNavBar(flag = null) {
    let navBarStatus = this.state.navBarStatus;
    if (flag !== null) {
      navBarStatus = !flag;
      if (!navBarStatus === this.state.navBarStatus) return;
    }
    this.setState({
      navBarStatus: !navBarStatus
    }, () => {
      setTimeout(() => window.dispatchEvent(new Event('resize', { bubbles: true, cancelable: false })), 500);
    });
  }

  render() {
    if (this.props.isInit) {
      /* eslint-disable */
      const isInfoModal = this.props.query && this.props.query.s === "1";
      if (isInfoModal) {
       return (
         <div className="simple-main-content">
           <div className="main-content-row">
             <div className="wrapper-panel">
               {React.cloneElement(this.props.children, { query: this.props.query, goBack: this._goBack, switchNavBar: this._switchNavBar })}
             </div>
           </div>
         </div>
       );
      } else {
        const LayoutWrapper = createLayout(this.props.layoutType, true);
        return (
          <LayoutWrapper {...this.props}>
            {this.props.children}
          </LayoutWrapper>
        );
      }
    }
    return null;
  }
}

// eslint-disable-next-line arrow-body-style
const mapStateToProps = state => {
  return {
    routing: state.routing,
    session: state.session,
    isInit: state.global.isInit,
    query: state.global.query,
    menu: state.menu,
    subMenu: state.subMenu,
    quickMenu: state.global.quickMenu,
    userName: state.userName,
    layoutType: state.global.layoutType
  };
};

// eslint-disable-next-line arrow-body-style
const mapDispatchToProps = () => dispatch => ({
  actions: {
    ...bindActionCreators({ push, replace, goBack, initDataFromServer, initDataFromServerNoMenu, updateEnterMenuId, updateQuickMenu }, dispatch)
  }
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
