import React, { Component } from 'react';
import _ from 'lodash';
import { Col, Row, Icon } from 'antd';

import ActionSheet from 'components/ActionSheet';

class DashboardIndexMember extends Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const props = this.props;
    const memberShortcuts = _.chunk([
      { type: 'purchase', name: '采购列表', onClick: props.onClick.bind(null, 'purchase') },
      { type: 'sale', name: '销售列表', onClick: props.onClick.bind(null, 'sale') },
      { type: 'other', name: '其他列表', onClick: props.onClick.bind(null, 'other') },
      { type: 'document', name: '单据查询', path: '/mobile/documents' },
      { type: 'customer', name: '客户列表', path: '/mobile/customers' },
      { type: 'supplier', name: '供应商列表', path: '/mobile/suppliers' },
      { type: 'product', name: '产品列表', path: '/mobile/products' },
      { type: 'inventory', name: '库存查询', path: '/mobile/inventories' },
    ], 4);

    let outlet = null;

    if (this.props.loading) {
      if (this.props.logined) {
        outlet = (<Icon type="loading" className="search-loading"/>);
      }
    } else {
      if (this.props.documents.length > 0) {
        outlet = (
          <Row>
            <Col span="24">
              {props.documents.each((doc) =>{
                let key = `${doc.type}_${doc.id}`;
                <Document key={key} document={doc} />
              })}
            </Col>
          </Row>
        );
      } else {
        let column = null;
        if (!props.hasPermission) {
          column = (
            <div>
              <svg className="file-color">
                <use xlinkHref={props.icons.document} />
              </svg>
              <p className="ik-title-font ik-margin-top-20 ik-title-color"> 亲，你没有权限操作此功能哦</p>
            </div>
          );
        } else {
          column = (
            <div>
              <p className="ik-title-font ik-margin-top-20 ik-title-color">
                还没有单据哦，快去新增吧
              </p>
            </div>
          );
        }

        outlet = (
          <Row type="flex" justify="center" className="document-list ik-padding-bottom-20">
            <Col span="16" className="ik-text-center">
              {column}
            </Col>
          </Row>
        );
      }
    }

    let fragments = [];
    memberShortcuts.map((shortcuts, rowCount) => {
      shortcuts.map((shortcut, colCount) => {
        let className = ''

        if ((colCount + 1) % 4 === 0 ) {
          className = '';
        } else {
          className = 'ik-border-right';
        }

        if (rowCount < memberShortcuts.length - 1) {
          className += 'ik-border-bottom';
        }

        let href = shortcut.path;
        if (shortcut.onClick) {
          href = 'javascript:void(0);';
        }
        fragments.push(<Col span="6" className={className} key={shortcut.type}>
          <a className="shortcut-link" href={href} onClick={shortcut.onClick}>
            <svg>
              <use xlinkHref={props.icons[shortcut.type]} />
            </svg>
            <p className="ik-margin-top-5 ik-title-font ik-text-center">{shortcut.name}</p>
          </a>
        </Col>);
      });
    });
    return (<Row>
      <Row id="action-sheet-button-container">
        <Col span="6" offset="18" className="ik-padding-top-20">
          <div
            className="action-sheet-button"
            onClick={props.onClick.bind(null, 'new')}>
            <Icon type="plus-circle" />
          </div>
        </Col>
      </Row>
      <div id="action-sheet-wrapper">
        <ActionSheet buttons={props.current_buttons} visable={props.actionSheetVisible} onHidden={props.actionSheetHidden} onSearch={props.handleSearch} />
      </div>
      <Row>
        <Col span="24">
          { fragments }
        </Col>
      </Row>
      <Row>
        <Col span="24" className="ik-container-background ik-height-40">
          <p className="document-title">最近的单据</p>
        </Col>
        <Col span="24">
          { outlet }
        </Col>
      </Row>
    </Row>);
  }
}

export default DashboardIndexMember;
