/* eslint-disable react/forbid-prop-types */
/* eslint-disable react/static-property-placement */
/* eslint-disable react/prefer-stateless-function */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable react/no-access-state-in-setstate */
/* eslint-disable react/destructuring-assignment */
import React from 'react';
import classnames from 'classnames';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
// 设置高亮的语言
// import { javascript } from 'react-syntax-highlighter/dist/esm/languages/prism';
import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';
import Markdown from 'markdown-to-jsx';
import PropTypes from 'prop-types';
import Icon from '@/Icon';
import i18n from './i18n';

import './style/index.scss';

const { Component } = React;
const i18nDefault = 'zh-cn';

export default class Code extends Component {
  static displayName = 'ewt-code';

  static propTypes = {
    children: PropTypes.any,
    lang: PropTypes.string,
    sourceCode: PropTypes.any,
    style: PropTypes.object,
    className: PropTypes.string,
    buttonText: PropTypes.any,
    prefixCls: PropTypes.string,
    mode: PropTypes.string,
  };

  static defaultProps = {
    children: null,
    lang: i18nDefault,
    prefixCls: 'ewt-code',
    buttonText: i18n[i18nDefault].btnText,
    style: {},
    className: '',
    sourceCode: '',
    mode: 'default', // ['default', 'inline', 'codeOnly']
  };

  constructor(props) {
    super(props);
    this.state = {
      codeVisible: false,
    };
    // SyntaxHighlighter.registerLanguage('javascript', javascript);
  }

  codeToggle = () => {
    this.setState({
      codeVisible: !this.state.codeVisible,
    });
  }

  render() {
    const self = this;
    const {
      prefixCls,
      children,
      style,
      className,
      buttonText,
      lang,
      sourceCode,
      mode,
      ...others
    } = this.props;
    const btnDescription = buttonText || i18n[lang].btnText;
    const {
      codeVisible,
    } = this.state;
    const isInlineMode = mode === 'inline';
    const isCodeOnlyMode = mode === 'codeOnly';
    const showCodeImmediately = isInlineMode || isCodeOnlyMode;
    const isMarkdown = mode === 'markdown';
    if (isMarkdown) {
      return (
        <Markdown
          className={classnames(
            { [`${prefixCls}`]: true },
            { [className]: !!className },
            { [`mode-${mode}`]: mode },
            'ewt-demo-content',
          )}
          style={style}
          {...others}
        >
          {children || sourceCode}
        </Markdown>
      );
    }
    return (
      <div
        className={classnames(
          { [`${prefixCls}`]: true },
          { [className]: !!className },
          { [`mode-${mode}`]: mode },
        )}
        style={style}
        {...others}
      >
        {
          showCodeImmediately ? null
            : (
              <div>
                <div className={`${prefixCls}-demo-preview`}>
                  {children}
                </div>
                <div
                  className={classnames(`${prefixCls}-demo-bottom`, { 'code-hidden': !codeVisible })}
                  role="button"
                  tabIndex="0"
                  onClick={self.codeToggle}
                >
                  <div className="button-text">{btnDescription}</div>
                  <Icon type={codeVisible ? 'triangle-up' : 'triangle-down'} />
                </div>
              </div>
            )
        }
        {
          (codeVisible || isCodeOnlyMode)
            ? (
              <div className="pre">
                <SyntaxHighlighter
                  language="javascript"
                  style={docco}
                  customStyle={{ backgroundColor: 'transparent', padding: 0 }}
                >
                  {sourceCode || (showCodeImmediately && children)}
                </SyntaxHighlighter>
              </div>
            )
            : null
        }
        {
          isInlineMode ? <code>{sourceCode || children}</code> : null
        }
      </div>
    );
  }
}