import React, { Component } from 'react';
import kebabCase from 'kebab-case';
import cx from 'classnames';
import { Icon, Balloon } from '@icedesign/base';
import { isAlibaba } from '../../utils';
import Markdown from '../../components/Markdown';
import DemoBox from '../../components/DemoBox';
import prism from '../../vendors/prism';
import './Components.scss';

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

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  shouldComponentUpdate(nextProps) {
    return nextProps.component.name !== this.props.component.name;
  }

  renderDemos = (item, idx) => {
    return <DemoBox dataSource={item} key={idx + item.title} />;
  };

  renderSubComponents = (component) => {
    if (
      component &&
      component.subComponentsREADME &&
      component.subComponentsREADME.length > 0
    ) {
      return component.subComponentsREADME.map((item, key) => {
        return (
          <div key={key}>
            <h3>
              {component.name}.{item.name}
            </h3>
            <Markdown value={item.propsREADME} />
          </div>
        );
      });
    } else {
      return null;
    }
  };

  renderBaseComponentHelps = (componentPackageName) => {
    // 内网提示
    if (
      isAlibaba &&
      ['@icedesign/base', '@ali/ice', '@alife/next'].indexOf(
        componentPackageName
      ) > -1
    ) {
      return (
        <Balloon
          trigger={
            <span
              style={{
                cursor: 'pointer',
                marginLeft: '4px',
                marginTop: '4px',
              }}
            >
              <Icon size="xs" type="help" />
            </span>
          }
        >
          <span style={{ fontWeight: 'bold' }}>基础包说明</span>
          <p>
            基础包指的是包含基础组件的 npm 包，ICE 使用的基础包提供自
            Fusion，如您之前已经使用 @alife/next 或
            @ali/ice，可以继续使用，不需要额外再安装
            @icedesign/base，因为从功能角度来讲它们没有任何区别。
          </p>

          <p>
            如果您使用 def 套件开发工具，我们建议您使用 @alife/next；如果您使用
            Iceworks 进行开发，建议您使用 @icedesign/base。
          </p>
        </Balloon>
      );
    } else {
      return null;
    }
  };

  renderMethods = (readmes) => {
    if (!readmes || !Array.isArray(readmes)) {
      return null;
    }

    return [
      <h2 key="method-readme">方法</h2>,
      ...readmes.map((readme, idx) => {
        return <Markdown value={readme} key={idx} />;
      }),
    ];
  };

  render() {
    const { component } = this.props;
    const kebabName = kebabCase(component.name);
    let componentPackageName = '@icedesign/base';
    if (component.category === 'BizComponent' && !isAlibaba) {
      componentPackageName = `@icedesign/${kebabName.replace(/^-/, '')}`;
    }
    const execed = /from \'([^\.]+)\'/.exec(component.importStatement);
    if (execed && execed[1]) {
      componentPackageName = execed[1];
    }
    if (component.npm) {
      componentPackageName = component.npm;
    }

    if (isAlibaba && componentPackageName === '@icedesign/base') {
      componentPackageName = '@alife/next';
    }

    if (isAlibaba && component.importStatement) {
      component.importStatement = component.importStatement
        .split('@icedesign/base')
        .join('@alife/next');
    }

    const isAlibabaPackage = /^@ali/.test(componentPackageName);

    const installCmd = !isAlibabaPackage
      ? `npm install ${componentPackageName} --save`
      : `def add ${componentPackageName}`;

    return (
      <div className="main-content">
        <div className="markdown-body">
          <h1>
            {component.name} {component.title}
          </h1>
          <section
            className={cx({
              'highlight-wrapper': true,
              'highlight-wrapper-expand': this.state.isExpand,
              'markdown-body': true,
            })}
          >
            {component.importStatement
              ? [
                <h2 key="安装方法">
                    安装方法
                    {this.renderBaseComponentHelps(componentPackageName)}
                  </h2>,
                <pre key="安装方法-pre">
                    <code
                      dangerouslySetInnerHTML={{
                        __html: prism.highlight(
                          installCmd,
                          prism.languages.bash
                        ),
                      }}
                    />
                  </pre>,
                <h2 key="引用方法">引用方法</h2>,
                <pre key="引用方法-pre">
                    <code
                      dangerouslySetInnerHTML={{
                        __html: prism.highlight(
                          component.importStatement,
                          prism.languages.bash
                        ),
                      }}
                    />
                  </pre>,
              ]
              : null}
          </section>

          <div className="component-intro">
            <Markdown value={component.body} />
          </div>
          <div className="component-api">
            <h2>API</h2>

            {component.propsREADME ? <h3>{component.title}</h3> : null}
            <Markdown value={component.propsREADME} />
            {this.renderSubComponents(component)}

            {this.renderMethods(component.methodREADME)}
          </div>
        </div>
        <div className="component-demos">
          {(component.demos || []).map(this.renderDemos)}
        </div>
      </div>
    );
  }
}