import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { getDocs } from '../../service/database';
import Markdown from '../../components/Markdown';
import DocumentMenu from '../../components/DocumentMenu';
import Loading from '../../components/Loading';
import { Feedback, Button, Accordion, Grid } from '@icedesign/base';
import './Documentation.scss';

const { Row, Col } = Grid;

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

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);

    this.state = {
      documentList: null,
      currentDocument: null,
      prevDocument: null,
      nextDocument: null,
    };
  }

  async componentDidMount() {
    // has cache
    const documentList = await getDocs();
    // eslint-disable-next-line
    this.setState({ documentList });

    const document = this.findDocumentByUrl();
    if (document) {
      this.loadDocument(document);
    } else {
      Feedback.toast.error('未查找到对应文档');
      this.props.router.replace('/docs');
    }
  }

  componentWillReceiveProps(nextProps) {
    if (
      nextProps.params.path !== this.props.params.path ||
      nextProps.params.category !== this.props.params.category
    ) {
      const document = this.findDocumentByUrl(nextProps.router);
      if (document) {
        this.loadDocument(document);
      } else {
        Feedback.toast.error('未查找到对应文档');
        this.props.router.replace('/docs');
      }
    }
  }

  /**
   * 根据 url 找到对应的文档对象
   * @returns doc
   */
  findDocumentByUrl = (router = this.props.router) => {
    const { documentList = [] } = this.state;
    const { params } = router;
    const { category, path } = params;

    for (let i = 0; i < documentList.length; i++) {
      if (documentList[i].path === `${category ? category + '/' : ''}${path}`) {
        return documentList[i];
      }
    }
    return null;
  };

  getSiblingDocument = (document) => {
    const { documentList } = this.state;
    const flatedDocumentList = flatDocumentList(documentList).filter(
      (doc) => !doc.isCategory
    );

    const currentDocIndex = flatedDocumentList.findIndex((doc, index) => {
      return doc.title === document.title;
    });

    return {
      prevDocument:
        currentDocIndex - 1 >= 0
          ? flatedDocumentList[currentDocIndex - 1]
          : null,
      nextDocument:
        currentDocIndex + 1 < flatedDocumentList.length
          ? flatedDocumentList[currentDocIndex + 1]
          : null,
    };
  };
  getNextDocument = (document) => {
    const { documentList } = this.state;
  };

  loadDocument = (document) => {
    this.setState({
      currentDocument: document,
    });
  };

  goPrev = () => {
    this.loadDocument(this.state.prevDocument);
  };
  goNext = () => {
    this.loadDocument(this.state.nextDocument);
  };

  renderLoading = () => {
    return <Loading />;
  };

  render() {
    const {
      documentList,
      prevDocument,
      nextDocument,
      currentDocument,
    } = this.state;

    if (!currentDocument) {
      return this.renderLoading();
    }

    return (
      <Row wrap gutter="20" className="docs-wrapper">
        <Col xxs={24} s={6} className="docs-sidebar-wrapper">
          <Accordion style={{ border: 'none' }} className="docs-menu-wrapper">
            <Accordion.Panel title="展开/收起">
              <DocumentMenu
                currentTitle={currentDocument.title}
                menuData={documentList}
              />
            </Accordion.Panel>
          </Accordion>
        </Col>
        <Col xxs={24} s={18} className="docs-main-wrapper typo">
          <IceContainer
            className="ice-container-doc"
            style={{
              position: 'relative',
              paddingTop: currentDocument.cover ? '250px' : '20px',
            }}
          >
            <div>
              {currentDocument.cover ? (
                <div
                  style={{
                    backgroundImage: `url(${currentDocument.cover})`,
                    ...styles.coverImage,
                  }}
                  title={currentDocument.title}
                />
              ) : null}
              <div className="docs-title">{currentDocument.title}</div>
              <Markdown value={currentDocument.jsonml} jsonml />
            </div>
            {/* <div className="docs-footer-wrapper"> */}
            {/* <div> */}
            {/* {prevDocument && ( */}
            {/* <Button onClick={this.goPrev} shape="text"> */}
            {/* 上一节：{prevDocument.title} */}
            {/* </Button> */}
            {/* )} */}
            {/* </div> */}
            {/* <div> */}
            {/* {nextDocument && ( */}
            {/* <Button onClick={this.goNext} shape="text"> */}
            {/* 下一节：{nextDocument.title} */}
            {/* </Button> */}
            {/* )} */}
            {/* </div> */}
            {/* </div> */}
          </IceContainer>
        </Col>
      </Row>
    );
  }
}

function flatDocumentList(doclist) {
  let result = [];
  doclist.forEach((item) => {
    result.push(item);
    if (item.children && item.children.length > 0) {
      result = result.concat(flatDocumentList(item.children));
    }
  });
  return result;
}

const styles = {
  coverImage: {
    position: 'absolute',
    left: 0,
    top: 0,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    height: '250px',
    width: '100%',
  },
};