import React, { Component } from 'react';
import styles from './index.less';
import { Modal } from '@easyv/antd';
import { EditOutlined, ExpandAltOutlined } from '@easyv/react-icons';
import classnames from 'classnames';
import AceEditor from '@easyv/react-ace';
import message from 'components/message';
import '@easyv/ace-builds/src-noconflict/ext-language_tools';
import '@easyv/ace-builds/src-noconflict/mode-json';
import '@easyv/ace-builds/src-noconflict/snippets/json';
import '@easyv/ace-builds/src-noconflict/theme-github';
import '@easyv/ace-builds/webpack-resolver';

type StateType = {
  visible: boolean;
};
type propType = {
  name?: string;
  height?: string;
  hideFullScreen?: boolean;
  onChange?: (data: any) => any;
  onBlur?: (data: any, editor: any) => any;
  mode?: string;
  className?: string;
  theme?: string;
  tabSize?: number;
  width?: string;
  value?: any;
  readOnly?: boolean;
  enableBasicAutocompletion?: boolean;
  enableLiveAutocompletion?: boolean;
  showGutter?: boolean;
  editorProps?: any;
  setOptions?: any;
  onEditChange?: () => void;
  willUnmount?: () => any;
};

export default class AceEditorBox extends Component<propType, StateType> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }
  editor: any;

  handleCancel = () => {
    this.setState({
      visible: false
    });
  };

  onkeyUp = () => {
    if (this.props.readOnly) {
      message.destroy();
      message.warning('数据响应结果不可编辑');
    }
  };

  render() {
    const {
      value,
      onChange,
      onBlur,
      className,
      onEditChange,
      width,
      mode,
      height,
      name,
      theme,
      tabSize,
      readOnly,
      hideFullScreen
    } = this.props;
    const { visible } = this.state;
    return (
      <>
        <div className={styles.aceEditorBox} onKeyUp={this.onkeyUp}>
          <AceEditor
            className={classnames(['dark', className])}
            ref={(dom) => (this.editor = dom)}
            mode={mode || 'json'}
            theme={theme || 'twilight'}
            width={width || '100%'}
            height={height || '200px'}
            name={name || 'static'}
            tabSize={tabSize || 2}
            value={value}
            readOnly={readOnly}
            enableBasicAutocompletion={true}
            enableLiveAutocompletion={true}
            showGutter={true}
            editorProps={{ $blockScrolling: true }}
            setOptions={{ wrap: true, useWorker: true }}
            enableSnippets={true}
            onBlur={onBlur}
            onChange={onChange}
          />
          {hideFullScreen ? null : (
            <>
              {onEditChange ? (
                <span onClick={onEditChange} className={classnames(styles.fullScreen, styles.editOutlined)}>
                  <EditOutlined className="icon" />
                </span>
              ) : null}

              <span
                onClick={() => {
                  this.setState({
                    visible: !visible
                  });
                }}
                className={styles.fullScreen}>
                <ExpandAltOutlined className="icon" />
              </span>
            </>
          )}
        </div>
        <Modal
          className={styles.modal}
          bodyStyle={{
            backgroundColor: '#2D2F38'
          }}
          visible={visible}
          title="全屏模式"
          footer={null}
          width={'80vw'}
          onCancel={this.handleCancel}>
          <div className={styles.aceContent}>
            <AceEditor
              className={classnames(['dark', className])}
              ref={(dom) => (this.editor = dom)}
              mode={mode || 'json'}
              theme={theme || 'twilight'}
              width={width || '100%'}
              height={'70vh'}
              name={name || 'static'}
              tabSize={tabSize || 2}
              value={value}
              readOnly={readOnly}
              enableBasicAutocompletion={true}
              enableLiveAutocompletion={true}
              showGutter={true}
              editorProps={{ $blockScrolling: true }}
              setOptions={{ wrap: true, useWorker: false }}
              onBlur={onBlur}
              onChange={onChange}
            />
          </div>
        </Modal>
      </>
    );
  }
}
