/* eslint-disable react/prefer-stateless-function */
/*
* annotation like `placeholder begin *** and
* placeholder end ***` is required for generate ewt manual, please keep it
*/
import React from 'react';
import Demo from '@/Demo';

/* placeholder begin src */
import EwtCode from '../index';
/* placeholder end src */

import './index.scss';

/* placeholder begin class */
class DemoComponent extends React.Component {
  render() {
    const defaultCode = `import { Code } from '@ewtd/ewt';

<Code sourceCode={sourceCode} buttonText="默认形式（mode=default）">
  我是效果展示区域，可以放入任何内容
</Code>
`;
    const inlineCode = `import { Code } from '@ewtd/ewt';

<Code mode="inline">hello world</Code>
`;

    const codeOnlySourceCode = `import { Code } from '@ewtd/ewt';

<EwtCode mode="codeOnly" >hello world</EwtCode>
`;
    const markdownTxt = `
### hello world
### hello world again
`;
    const markdownSourceCode = `import { Code } from '@ewtd/ewt';
const markdownTxt = \`
### hello world
### hello world again
\`;

<EwtCode mode="markdown" >{markdownTxt}</EwtCode>`;
    return (
      <Demo className="ewt-code-demo">
        <h2>Code 组件</h2>
        <p>该组件可用来展示源代码</p>
        <h3>代码演示</h3>
        <EwtCode sourceCode={defaultCode} buttonText="默认形式（mode=default）">
          我是效果展示区域，可以放入任何内容
        </EwtCode>
        <EwtCode sourceCode={inlineCode} buttonText="内联形式（mode=inline）">
          <p>
            该模式下
            <EwtCode mode="inline">sourceCode</EwtCode>
            和
            <EwtCode mode="inline">children</EwtCode>
            都可以放置源代码，比如
            <br />
            <br />
            <EwtCode mode="inline">{'<EwtCode mode="inline" >react-router</EwtCode>'}</EwtCode>
            同
            <br />
            <br />
            <EwtCode mode="inline">{'<EwtCode sourceCode="react-router" mode="inline" />'}</EwtCode>
            效果是一样的
          </p>
        </EwtCode>
        <EwtCode sourceCode={codeOnlySourceCode} buttonText="源码模式（mode=codeOnly）">
          <EwtCode mode="codeOnly">hello world</EwtCode>
        </EwtCode>
        <EwtCode sourceCode={markdownSourceCode} buttonText="markdown 模式（mode=markdown）">
          <EwtCode mode="markdown">
            {markdownTxt}
          </EwtCode>
        </EwtCode>
        <h3>API</h3>
        <table>
          <thead>
            <tr>
              <th>参数</th>
              <th>说明</th>
              <th>类型</th>
              <th>是否必须</th>
              <th>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>mode</td>
              <td>
                模式可选[
                <EwtCode mode="inline">default</EwtCode>
                、
                <EwtCode mode="inline">inline</EwtCode>
                、
                <EwtCode mode="inline">codeOnly</EwtCode>
                ]（模式为
                {' '}
                <EwtCode mode="inline">markdown</EwtCode>
                {' '}
                时，
                <a target="__blank" href="https://github.com/probablyup/markdown-to-jsx">参数同 markdown-to-jsx</a>
                ）
              </td>
              <td>string</td>
              <td>否</td>
              <td><EwtCode mode="inline">default</EwtCode></td>
            </tr>
            <tr>
              <td>buttonText</td>
              <td>
                默认模式下（
                <EwtCode mode="inline">default</EwtCode>
                ）显示/隐藏 源码按钮内容
              </td>
              <td>any</td>
              <td>否</td>
              <td>查看源码</td>
            </tr>
            <tr>
              <td>children</td>
              <td>
                要展示的 demo 内容（
                <EwtCode mode="inline">mode=inline/codeOnly/markdown</EwtCode>
                时则同
                {' '}
                <EwtCode mode="inline">sourceCode</EwtCode>
                效果一致）
              </td>
              <td>any</td>
              <td>否</td>
              <td><EwtCode mode="inline">null</EwtCode></td>
            </tr>
            <tr>
              <td>className</td>
              <td>添加自定义class</td>
              <td>string</td>
              <td>否</td>
              <td><EwtCode mode="inline">&#39;&#39;</EwtCode></td>
            </tr>
            <tr>
              <td>style</td>
              <td>自定义样式</td>
              <td>object</td>
              <td>否</td>
              <td><code><EwtCode mode="inline">{'{}'}</EwtCode></code></td>
            </tr>
            <tr>
              <td>prefixCls</td>
              <td>样式名前缀</td>
              <td>string</td>
              <td>否</td>
              <td><EwtCode mode="inline">ewt</EwtCode></td>
            </tr>
          </tbody>
        </table>
      </Demo>
    );
  }
}
/* placeholder end class */

export default DemoComponent;