import ConfigProvider from '../config-provider';
import Highlight, { defaultProps } from 'prism-react-renderer';
import Icon from '../icon';
import Message from '../message';
import React, { Component } from 'react';
import copy from 'copy-to-clipboard';
import theme from './theme';
interface CodeSnippetProps {
  type?: string;
  code?: string;
  width?: any;
  height?: any;
}

class CodeSnippet extends Component<CodeSnippetProps> {
  render() {
    const { code, type, width } = this.props;

    return (
      <Highlight {...defaultProps} code={code} language="jsx" theme={theme}>
        {type === 'number'
          ? ({ className, style, tokens, getLineProps, getTokenProps }) => (
            <pre
              className={`${className} codesnippet-numberPre next-code-snippet`}
              style={{ ...style, width }}
            >
              {tokens.map((line, i) => (
                <div
                  className="codesnippet-line"
                  key={i}
                  {...getLineProps({ line, key: i })}
                >
                  <span className="codesnippet-lineno">{i + 1}</span>
                  <span className="codesnippet-linecontent">
                    {line.map((token, key) => (
                      <span key={key} {...getTokenProps({ token, key })} />
                    ))}
                  </span>
                </div>
              ))}
            </pre>
          )
          : ({ className, style, tokens, getLineProps, getTokenProps }) => (
            <pre className={className} style={style}>
              {tokens.map((line, i) => (
                <div {...getLineProps({ line, key: i })}>
                  {line.map((token, key) => (
                    <span {...getTokenProps({ token, key })} />
                  ))}
                </div>
              ))}
              <Icon
                type="Copy2-outlined"
                onClick={() => {
                  copy(code);
                  Message.success('代码已复制成功');
                }}
              />
            </pre>
          )}
      </Highlight>
    );
  }
}

export default ConfigProvider.config(CodeSnippet);