import _ from 'underscore';
import React from "react";
import { Button, Modal } from "antd";
import { PlayCircleFilled } from '@ant-design/icons';
import { Controlled as CodeMirror } from 'react-codemirror2';
import Mustache from 'mustache';
import './ScriptManager.less'

export default class EventManager extends React.Component {

  constructor(props) {
    super(props);

    _.bindAll(this, ["handleCancelEditing", "handleEditCode", "handleSaveCode", "handleRun", "renderEditor"]);

    this.state = {
      isShowEditor: false,
      jsCode: `
        {
          "name": {
            "first": "Michael",
            "last": "Jackson"
          },
          "age": "RIP"
        }
      `,
      htmlCode: `
        <ul>
          <li> * {{name.first}} {{name.last}} </li>
          <li> * {{age}} </li>
        </ul>
      `,
      result: ''
    };
  }

  handleCancelEditing() {
    this.setState({ isShowEditor: false });
  }

  handleEditCode() {
    this.setState(preState => ({ isShowEditor: !preState.isShowEditor }));
  }

  handleSaveCode() {
    this.setState({ isShowEditor: true });
  }

  handleRun() {
    let template = this.state.htmlCode;
    Mustache.parse(template);
    const context = JSON.parse(this.state.jsCode);
    const result = Mustache.render(template, context);

    this.$resultDOM.innerHTML = result;
    this.setState({ result })
  }

  renderEditor() {
    const { jsCode = '', htmlCode = '', result = '' } = this.state;
    return (
      <div className="script-editor">
        <div className="script-editor-toolbar">
          <PlayCircleFilled onClick={this.handleRun} />
        </div>
        <div className="script-editor-body">
          <div className="script-editor-code">
            <div className="script-editor-js">
              <CodeMirror
                value={this.state.jsCode}
                options={{
                  mode: 'javascript',
                  theme: 'material-darker',
                  lineNumbers: true
                }}
                onBeforeChange={(editor, data, value) => {
                  this.setState({ jsCode: value });
                }}
              />
            </div>
            <div className="script-editor-html">
              <CodeMirror
                value={this.state.htmlCode}
                options={{
                  mode: 'html',
                  theme: 'material-darker',
                  lineNumbers: true
                }}
                onBeforeChange={(editor, data, value) => {
                  this.setState({ htmlCode: value });
                }}
              />
            </div>
          </div>
          <div className="script-editor-result">
            <pre className="script-editor-result-code">{result}</pre>
            <div className="script-editor-dom" ref={dom => this.$resultDOM = dom}></div>
          </div>
        </div>
      </div>
    )
  }

  render() {
    const { isShowEditor = false } = this.state;
    return (
      <div className="script-editor-container">
        {/* <Button onClick={this.handleEditCode}>编写自定义脚本</Button> */}
        <Modal
          title="自定义脚本"
          visible={isShowEditor}
          width="90vw"
          bodyStyle={{ width: "100%", height: "calc(80vh - 110px)" }}
          className="script-editor-modal"
          onOk={this.handleSaveCode}
          onCancel={this.handleCancelEditing}
          footer={null}
        >{this.renderEditor()}</Modal>
      </div>
    )
  }
}
