/**
 * Created by geweimin on 17/7/7.
 */
import React from 'react';
import { autobind } from 'core-decorators';

import { Nav, GlobalNav } from '../../../components';
import { clickSpaceWrapper } from '../../../components/clickSpaceCallback';
import { getValueByKey } from '../../utils/MapUtils';
import { getRecMenuId, saveEnterMenuId, saveProcessMenuCode } from '../../service/SessionStorage';
import { getMenuItemByFunc, getMenuItemAndPathByFunc } from '../../utils/MenuHelper';
import { HNav } from '../../../components/navigator/globalNav';
import { iconWrapper } from '../../utils/IconHelper';

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

  @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);
    });
  }

  _renderQuickEnter = (menu, desc, menuCode) => {
    if (!menu) return (<span className="crumb-item"><span style={{ paddingLeft: '4px', paddingRight: '5px' }}>/</span>{desc}</span>);
    const Comp = clickSpaceWrapper(HNav, { querySelector: 'ref-class-name-' + menuCode });
    return (
      <Comp
        switchNavBar={this._switchNavBar}
        updateEnterMenuId={this.props.actions.updateEnterMenuId}
        navBarStatus={this.state.navBarStatus}
        menu={menu}
        desc={desc}
        push={this.props.actions.push}
        quickMenu={this.props.quickMenu}
        updateQuickMenu={this.props.actions.updateQuickMenu}
      />
    );
  };

  _goHome = () => {
    this.props.actions.push({ pathname: '/' });
  };

  @autobind
  _renderCrumbs() {
    const homeIconStyle = { fontSize: '20px', color: '#00bcf2', cursor: 'pointer', position: 'relative', top: '-9px' };
    const defaultCrumb = (<span className="crumb-item">{iconWrapper('icon-home7', null, null, { onClick: this._goHome }, homeIconStyle)}</span>);
    if (getValueByKey(this.props.routing, null, 'locationBeforeTransitions', 'pathname') === '/') {
      saveEnterMenuId();
      saveProcessMenuCode();
      return defaultCrumb;
    }
    const code = getRecMenuId().enterMenuId;
    if (code) {
      const { indexPath = [] } = getMenuItemAndPathByFunc(item => item.menuCode === code, this.props.menu);
      const { desc = [defaultCrumb] } = indexPath.reduce((mObj, p) => {
        return { menu: mObj.menu[p].subMenus, desc: [...mObj.desc, this._renderQuickEnter(mObj.menu[p].subMenus, mObj.menu[p].menuValue, mObj.menu[p].menuCode)] };
      }, { menu: this.props.menu, desc: [defaultCrumb] });
      return desc;
    }
    return defaultCrumb;
  }

  _logout = () => {
    /* eslint-disable */
    if (__logoutHandler) {
      __logoutHandler(() => console.log('logout success!'), error => {
        Modal.error({
          title: '提示',
          content: error,
        });
      });
    } else {
      console.error('there is no func logoutHandler!');
    }
  };

  _renderPageHeader = () => {
    /* eslint-disable */
    return (
      <div className="page-header">
        <GlobalNav
          switchNavBar={this._switchNavBar}
          updateEnterMenuId={this.props.actions.updateEnterMenuId}
          navBarStatus={this.state.navBarStatus}
          menu={this.props.menu}
          push={this.props.actions.push}
          quickMenu={this.props.quickMenu}
          updateQuickMenu={this.props.actions.updateQuickMenu}
        />
        <div className="xsy_oa_detail_crumbs">
          <ul className="xsy_oa_detail_path">
            <li>{this._renderCrumbs()}</li>
          </ul>
        </div>
        <div className="right-tool-bar">
          <div className="t-wrapper">
            <div>
              <span className="userpic">{this.props.userName && this.props.userName[0]}</span>
              <span>{this.props.userName}</span>
            </div>
          </div>
          <div className="t-wrapper">
            <span>{iconWrapper('icon-icon')}消息中心</span>
            <i className="t-badge">12</i>
          </div>
          <div className="t-wrapper">
            <span>{iconWrapper('icon-shezhi')}设置</span>
          </div>
          <div className="t-wrapper" onClick={this._logout}>
            <span>{iconWrapper('icon-tuichu1')}退出</span>
          </div>
        </div>
      </div>
    );
  };

  @autobind
  _goBack() {
    this.props.actions.goBack();
  }

  _getNavBarWidth = () => this.state.navBarStatus ? 220 : 60;

  render() {
    return (
      <div className="body-wrapper wrapper remove-block-space">
        <div style={{ width: this._getNavBarWidth() + 'px', display: 'block' }} className="nav-menu" >
          <Nav updateQuickMenu={this.props.actions.updateQuickMenu} push={this.props.actions.push} updateEnterMenuId={this.props.actions.updateEnterMenuId} status={this.state.navBarStatus} switchMenu={() => this._switchNavBar()} splat={this.props.params && this.props.params.splat} />
        </div>
        <div className="main-content" style={{ left: this._getNavBarWidth() + 'px' }} >
          <div className="main-content-row">
            {this._renderPageHeader()}
            <div className="wrapper-panel" style={{ padding: '10px 10px 0px 10px', backgroundColor: 'transparent' }}>
              {React.cloneElement(this.props.children, { query: this.props.query, goBack: this._goBack, switchNavBar: this._switchNavBar })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
