/**
 * Created by baoyinghai on 11/28/16.
 */
import React from 'react';
import { Link } from 'react-router';
import { autobind } from 'core-decorators';
import { CONTAINER_PRE } from '../../../entrance/routes';
import { Tooltip } from '../../../../components/mxa';
import { ProgressBar } from '../../../../components';
import SideMenuBarContainer from './sideMenuBarContainer';

export default class SideMenu extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedItem: this.props.selectedItem,
      unSelected: [],
    };
    this.menuCode = this.props.selectedItem;
    this.classArray = [{
      wrapper: 'first',
      accordion: 'accordion-first-item',
      getStyleFunc: this._getStyleOfFirst
    }, {
      wrapper: 'second',
      accordion: '',
      getStyleFunc: this._getStyleOfSecond
    }];
  }

  @autobind
  _menuClick(subItem) {
    this.setState({
      selectedItem: subItem
    }, () => this.props.menuClick(subItem));
  }

  _isSelected = item => {
    if (this.state.selectedItem.menuCode === item.menuCode) {
      return 'active';
    }
    return '';
  };

  _switchAccordion = e => {
    const parentDiv = e.currentTarget.parentNode;
    if (parentDiv) {
      const ulEle = parentDiv.childNodes[1];
      const iEle = e.currentTarget.childNodes[0];
      if (ulEle && iEle) {
        if (ulEle.style.display === 'none') {
          ulEle.style.display = '';
          iEle.className = 'selected';
        } else {
          ulEle.style.display = 'none';
          iEle.className = '';
        }
      }
    }
  };

  _getStyleOfSecond = item => {
    if (item.subMenus) {
      if (item.subMenus.some(menu => menu.menuCode === this.menuCode)) {
        return { iClassName: 'selected', displayAttr: '' };
      }
    }
    return { iClassName: '', displayAttr: 'none' };
  };

  _getStyleOfFirst = (/* item */) => {
    return { iClassName: 'selected', displayAttr: 'block' };
  };


  _renderMenuItem = (item, level) => {
    // 到三级为止
    if (!item.subMenus || level === 2) {
      if (level === 0) {
        return (
          <div className="first-menu-item">
            {this._renderTooltipItem(item)}
          </div>
        );
      }
      return (
        <div>
          {this._renderTooltipItem(item)}

        </div>
      );
    }
    const { iClassName, displayAttr } = this.classArray[level].getStyleFunc(item);
    return (
      <div className={this.classArray[level].wrapper}>
        <a className={this.classArray[level].accordion} onClick={this._switchAccordion}><i className={iClassName} /><span>{item.menuValue}</span></a>
        <ul style={{ display: displayAttr }}>
          {item.subMenus.map(subItem => (
            <li>
              {this._renderMenuItem(subItem, level + 1)}
            </li>
          ))}
        </ul>
      </div>
    );
  };

  _renderMenu = (menu, level) => menu && menu.map(item => this._renderMenuItem(item, level));

  @autobind
  _renderTooltipItem(subItem) {
    const { menuTaskCount, infoCompleteness } = this.props;
    if (subItem.menuValue.length > 6) {
      return (
        <Tooltip title={subItem.menuValue} placement="right">
          <a className={'accordion-first-item ' + this._isSelected(subItem)} onClick={() => this._menuClick(subItem)}><span>{subItem.menuValue.substr(0, 5) + '...'}</span></a>
        </Tooltip>
      );
    }
    return (
      <div className={'accordion-first-item ' + this._isSelected(subItem)} onClick={() => this._menuClick(subItem)}>
        <a><span>{subItem.menuValue}</span></a>
        {this.renderMenuTaskCount(subItem, menuTaskCount)}
        {infoCompleteness && (infoCompleteness[subItem.menuCode] || infoCompleteness[subItem.menuCode] === 0) ? this.renderInfoCompleteness(infoCompleteness[subItem.menuCode]) : null}
      </div>
    );
  }

  // TODO: 先隐藏了未读条数，后期迭代加上
  // {this.renderMenuTaskCount(subItem, menuTaskCount)}

  @autobind
  renderMenuTaskCount(subItem, menuTaskCount) {
    if (menuTaskCount && menuTaskCount[subItem.menuCode]) {
      let width = 16;
      if (menuTaskCount) {
        if (menuTaskCount[subItem.menuCode] > 99) {
          width = 28;
        } else if (menuTaskCount[subItem.menuCode] > 9) {
          width = 20;
        }
      }
      const itemNumStyle = { width };
      if (menuTaskCount[subItem.menuCode] > 0) {
        return (
          <div className="item-num" style={itemNumStyle}>
            {menuTaskCount[subItem.menuCode]}
          </div>
        );
      }
    }
    return null;
  }

  @autobind
  renderInfoCompleteness(num) {
    const preStyle = {
      color: num >= 9990 ? '#26BF8C' : '#fa7252',
    };

    const progressPre = {
      width: parseInt(num / 100, 10) + '%'
    };
    if (num >= 9990) {
      progressPre.background = '#85c440';
      progressPre.borderColor = '#78b337 #6ba031 #568128';
      progressPre.backgroundImage = 'linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)';
    }

    // return (
    //   <div>
    //     <div className="info-completeness-num">
    //       <span style={preStyle}>{parseInt(num / 100, 10)}</span><span>%</span>
    //     </div>
    //     <div className="info-completeness-progress">
    //       <ProgressBar pre={parseInt(num / 100, 10)} />
    //     </div>
    //   </div>
    // );

    return (
      <div>
        <div className="info-completeness-num">
          <span style={preStyle}>{parseInt(num / 100, 10)}</span><span>%</span>
        </div>
      </div>
    );
  }

  render() {
    const appendStyle = { maxHeight: window.innerHeight + 'px' };
    return (
      <div className="info-side-bar" style={appendStyle}>
        <ul>
          {this._renderMenu(this.props.menu, 0)}
        </ul>
      </div>
    );
  }

}

export const SideMenuContainer = SideMenuBarContainer;

