import React, { Component } from 'react';
import { Feedback, Grid, Accordion, Icon } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import { Link } from 'react-router';
import Loading from '../../components/Loading';
import MainContent from './MainContent';
import COMPONENTS_GROUP from './dict';
import DocumentMenu from '../../components/DocumentMenu';
import { join } from 'path';
import './Components.scss';
import {
  getBizComponentDocs,
  getBaseComponentDocs,
} from '../../service/database';
let _databaseCache = [];
const iconMap = {
  基础: 'https://gw.alicdn.com/tfs/TB1xX1gaQOWBuNjSsppXXXPgpXa-30-30.png',
  布局: 'https://gw.alicdn.com/tfs/TB1ygGdaNSYBuNjSsphXXbGvVXa-28-28.png',
  表单类: 'https://gw.alicdn.com/tfs/TB1PMWmaQCWBuNjy0FaXXXUlXXa-28-30.png',
  提示反馈: 'https://gw.alicdn.com/tfs/TB1ThGfaL9TBuNjy0FcXXbeiFXa-30-30.png',
  通用: 'https://gw.alicdn.com/tfs/TB1AlWeaFGWBuNjy0FbXXb4sXXa-28-32.png',
  工具库: 'https://gw.alicdn.com/tfs/TB1Ty1eaSCWBuNjy0FhXXb6EVXa-32-30.png',
  default: 'https://gw.alicdn.com/tfs/TB1xX1gaQOWBuNjSsppXXXPgpXa-30-30.png',
};
const { Row, Col } = Grid;

export default class Components extends Component {
  static displayName = 'Components';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      currentComponent: null,
      componentsList: null,
      notFound: false,
    };
  }

  async componentDidMount() {
    const { routeParams } = this.props;
    const componentName = routeParams.componentName || null;
    await this.initComponentView(componentName);
  }

  initComponentView = async (componentName) => {
    const { router } = this.props;
    const componentsList = await this.readyDataBase();
    if (!componentName) {
      router.push(
        join(
          window.routePrefix,
          `/component/${componentsList[0].name.toLowerCase()}`
        )
      );
    } else {
      const currentComponent = componentsList.find((component) => {
        return new RegExp(`^${component.name}$`, 'i').test(componentName);
      });

      if (currentComponent) {
        this.setState({
          componentsList,
          currentComponent,
          notFound: false,
        });
      } else {
        this.setState({
          componentsList,
          notFound: true,
        });
      }
    }
  };

  readyDataBase = () => {
    if (_databaseCache.length > 0) {
      return Promise.resolve(_databaseCache);
    }

    return Promise.all([getBaseComponentDocs(), getBizComponentDocs()])
      .then(([baseCompData, bizCompData]) => {
        // 对业务组件的数据做一下处理
        const bizComponentData = bizCompData.map((comp) => {
          return {
            ...comp,
            name: /^Ice/.test(comp.name) ? comp.name : comp.name,
          };
        });
        _databaseCache = [...baseCompData, ...bizComponentData];
        return _databaseCache;
      })
      .catch((err) => {
        console.log(err.stack);
        Feedback.toast.error('获取数据出错!');
      });
  };

  async componentWillReceiveProps(nextProps) {
    if (
      this.props.routeParams.componentName !==
      nextProps.router.params.componentName
    ) {
      await this.initComponentView(nextProps.routeParams.componentName);
    }
  }

  componentGroup = (componentsList = []) => {
    const newComponentsList = [];
    const tmp = [];
    componentsList.map((item, index) => {
      COMPONENTS_GROUP.map((group) => {
        const isGroupComponent = group.children.includes(item.name);
        if (tmp.includes(group.name)) {
          if (isGroupComponent) {
            const idx = tmp.indexOf(group.name);
            newComponentsList[idx].children.push(item);
          }
        } else {
          if (isGroupComponent) {
            tmp.push(group.name);
            newComponentsList.push({
              name: group.name,
              children: [item],
            });
          }
        }
      });
    });

    return newComponentsList;
  };

  renderNotFound() {
    return (
      <div title="404">
        <div style={{ padding: '100px 0px', textAlign: 'center' }}>
          <img
            width={314}
            src="//img.alicdn.com/tps/TB11W.WOXXXXXcbaXXXXXXXXXXX-496-310.png"
          />
          <p style={{ color: '#999', fontSize: '15px' }}>
            我们没有找到您要的页面,点击{' '}
            <Link to={window.routePrefix || '/'}>这里</Link>返回首页
          </p>
        </div>
      </div>
    );
  }

  render() {
    const { currentComponent, componentsList, notFound } = this.state;

    if (notFound) {
      return this.renderNotFound();
    }

    if (!currentComponent || !componentsList) {
      return <Loading />;
    }

    const COMPONENTS_GROUP_ORDER = COMPONENTS_GROUP.map((item) => item.name);
    const groupedComponents = this.componentGroup(componentsList).sort(
      (prev, next) => {
        return (
          COMPONENTS_GROUP_ORDER.indexOf(prev.name) >
          COMPONENTS_GROUP_ORDER.indexOf(next.name)
        );
      }
    );

    return (
      <Row wrap className="components-wrapper">
        <Col xxs={24} s={6} className="components-sidebar-wrapper">
          <Accordion
            style={{ border: 'none' }}
            className="components-sidebar-accordion"
          >
            <Accordion.Panel title="展开/收起组件列表">
              <div className="docs-menu-wrapper">
                <DocumentMenu
                  currentTitle={currentComponent.name}
                  menuData={groupedComponents}
                  sort={false}
                  renderItem={(item, depth) => {
                    return (
                      <div
                        onClick={() => {
                          if (item.children) {
                            // group, do nothing here
                          } else {
                            this.props.router.push(
                              join(
                                window.routePrefix,
                                `/component/${item.name.toLowerCase()}`
                              )
                            );
                          }
                        }}
                        className={`docs-menu-item depth-${depth} ${
                          depth === 0 && item.children ? 'pure-title' : ''
                        }`}
                      >
                        {depth === 0 && item.children ? (
                          <img
                            src={iconMap[item.name] || iconMap.default}
                            style={{
                              position: 'relative',
                              top: '2px',
                              width: '15px',
                              height: '15px',
                              marginRight: '5px',
                            }}
                          />
                        ) : null}
                        <span className="component-title">{item.name}</span>
                        <span className="component-chinese">{item.title}</span>
                      </div>
                    );
                  }}
                />
              </div>
            </Accordion.Panel>
          </Accordion>
        </Col>
        <Col xxs={24} s={18} className="components-main-wrapper">
          <IceContainer className="ice-container-component">
            <MainContent component={currentComponent} />
          </IceContainer>
        </Col>
      </Row>
    );
  }
}