import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { join } from 'path';
import './DocumentMenu.scss';

const appRoutePrefix = window.routePrefix;
@withRouter
export default class DocumentMenu extends Component {
  renderMenu = (document, depth, index) => {
    const { renderItem, currentTitle } = this.props;

    let children = null;
    if (document.children && document.children.length > 0) {
      children = document.children.map((item, idx) => {
        return this.renderMenu(item, depth + 1, depth + 1 + idx);
      });
    }

    return (
      <div
        className={`docs-menu ${
          currentTitle === document.name ? 'active' : ''
        }`}
        key={document.id || index}
      >
        {renderItem(document, depth)}
        {children}
      </div>
    );
  };

  flattenMenuData = (list = []) => {
    const { sort } = this.props;
    // 只支持一层 category
    const orderedList = !sort
      ? list
      : list.sort((prev, next) => {
        if (prev.order && next.order) {
          return prev.order - next.order;
        }

        if (!next.category && prev.category) {
          return 1;
        }
        if (prev.order === next.order) {
          return prev.path > next.path ? 1 : -1;
        } else {
          return prev.order - next.order;
        }
      });

    const categoryMap = {};
    orderedList.forEach((doc) => {
      const categoryName = doc.category || 'default';
      if (!categoryMap[categoryName]) {
        categoryMap[categoryName] = [];
      }
      categoryMap[categoryName].push(doc);
    });

    const categoryOrder = ['default', '入门指引', '进阶指南', '物料', '其它'];
    Object.keys(categoryMap).forEach((key) => {
      if (categoryOrder.indexOf(key) === -1) {
        categoryOrder.push(key);
      }
    });

    return categoryOrder.reduce((_list, key) => {
      if (!categoryMap[key]) {
        return _list;
      }

      if (key === 'default') {
        return [..._list, ...categoryMap[key]];
      } else {
        return [
          ..._list,
          { title: key, isCategory: true },
          ...categoryMap[key],
        ];
      }
    }, []);
  };

  renderItem = (doc, depth) => {
    const { currentTitle } = this.props;
    return (
      <div
        key={`${doc.title}-${depth}`}
        onClick={() => {
          if (!doc.isCategory) {
            this.props.router.push(join(appRoutePrefix, '/docs', doc.path));
          }
        }}
        className={`docs-menu ${currentTitle === doc.title ? 'active' : ''}`}
      >
        <div
          className={`docs-menu-item depth-${depth} ${
            doc.isCategory ? 'pure-title' : ''
          }`}
        >
          <span className="docs-menu-item-title">{doc.title}</span>
        </div>
      </div>
    );
  };

  render() {
    const { menuData, renderItem } = this.props;
    const flattenMenuData = this.flattenMenuData(menuData);

    if (renderItem) {
      return (
        <div>
          {menuData.map((menu, index) => this.renderMenu(menu, 0, index))}
        </div>
      );
    }
    return <div>{flattenMenuData.map(this.renderItem)}</div>;
  }
}