import _Dialog from "@alifd/next/es/dialog";
import _extends from "@babel/runtime/helpers/extends";
import _Icon from "@alifd/next/es/icon";
import _Button from "@alifd/next/es/button";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent } from 'react';
import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor';
import { event, skeleton } from '@alilc/lowcode-engine';
import { js_beautify } from 'js-beautify';
import './index.less';
var SETTER_NAME = 'function-setter';
var defaultEditorOption = {
  width: '100%',
  height: '95%',
  options: {
    readOnly: false,
    automaticLayout: true,
    folding: true,
    // 默认开启折叠代码功能
    lineNumbers: 'on',
    wordWrap: 'off',
    formatOnPaste: true,
    fontSize: 12,
    tabSize: 2,
    scrollBeyondLastLine: false,
    fixedOverflowWidgets: false,
    snippetSuggestions: 'top',
    minimap: {
      enabled: false
    },
    scrollbar: {
      vertical: 'auto',
      horizontal: 'auto'
    }
  }
};
var FunctionSetter = /*#__PURE__*/function (_PureComponent) {
  function FunctionSetter() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
    _this.emitEventName = '';
    _this.state = {
      isShowDialog: false
    };
    _this.bindEvent = function (eventName, paramStr) {
      _this.bindEventCallback(eventName, paramStr);
    };
    _this.bindFunction = function (isEdit) {
      var _this$props = _this.props,
        field = _this$props.field,
        value = _this$props.value,
        template = _this$props.template;
      var paramStr;
      var functionName;
      if (value) {
        paramStr = _this.parseFunctionParam(value.value);
        functionName = _this.parseFunctionName(value.value);
      }
      event.emit('eventBindDialog.openDialog', functionName || field.name, _this.emitEventName, paramStr, isEdit, functionName || field.name, {
        template: template
      });
    };
    _this.openDialog = function () {
      var _this$props$value = _this.props.value,
        value = _this$props$value === void 0 ? {} : _this$props$value;
      _this.setState({
        isShowDialog: true
      });
      _this.functionCode = value.value;
    };
    _this.closeDialog = function () {
      _this.setState({
        isShowDialog: false
      });
    };
    _this.removeFunctionBind = function () {
      var removeProp = _this.props.removeProp;
      removeProp();
    };
    _this.parseFunctionName = function (functionString) {
      var _functionString$split;
      // 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名
      return (_functionString$split = functionString.split('this.')[1]) === null || _functionString$split === void 0 ? void 0 : _functionString$split.split('.')[0];
    };
    _this.parseFunctionParam = function (functionString) {
      // eslint-disable-next-line no-useless-escape
      var matchList = functionString.match(/\[([\s\S]*?)\]/g);
      if (matchList !== null && matchList !== void 0 && matchList.length) {
        var paramStr = matchList[0].substring(1, matchList[0].length - 1);
        if (paramStr == '') {
          return null;
        }
        return paramStr;
      }
    };
    /**
     * 渲染按钮(初始状态)
     */
    _this.renderButton = function () {
      return /*#__PURE__*/React.createElement(_Button, {
        size: "small",
        type: "normal",
        onClick: function onClick() {
          return _this.bindFunction();
        }
      }, "\u7ED1\u5B9A\u51FD\u6570");
    };
    _this.updateCode = function (newCode) {
      _this.functionCode = newCode;
    };
    _this.onDialogOk = function () {
      var onChange = _this.props.onChange;
      onChange({
        type: 'JSFunction',
        value: _this.functionCode
      });
      _this.closeDialog();
    };
    _this.focusFunctionName = function (functionName) {
      skeleton.showPanel('codeEditor');
      setTimeout(function () {
        event.emit('codeEditor.focusByFunction', {
          functionName: functionName
        });
      }, 300);
    };
    /**
     * 渲染绑定函数
     */
    _this.renderBindFunction = function () {
      var value = _this.props.value;

      // 解析函数名
      var functionName = _this.parseFunctionName(value.value);
      return /*#__PURE__*/React.createElement("div", {
        className: "function-container"
      }, /*#__PURE__*/React.createElement("img", {
        className: "funtion-icon",
        src: "https://gw.alicdn.com/tfs/TB1NXNhk639YK4jSZPcXXXrUFXa-200-200.png"
      }), /*#__PURE__*/React.createElement("span", {
        className: "function-name",
        onClick: function onClick() {
          return _this.focusFunctionName(functionName);
        }
      }, functionName), /*#__PURE__*/React.createElement(_Icon, {
        type: "set",
        size: "medium",
        className: "funtion-operate-icon",
        onClick: function onClick() {
          return _this.bindFunction(true);
        }
      }), /*#__PURE__*/React.createElement(_Icon, {
        type: "ashbin",
        size: "medium",
        className: "funtion-operate-icon",
        onClick: _this.removeFunctionBind
      }));
    };
    /**
     * 渲染编辑函数按钮(可直接编辑函数内容)
     */
    _this.renderEditFunctionButton = function () {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
        size: "small",
        type: "primary",
        onClick: _this.openDialog
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "edit"
      }), "\u7F16\u8F91\u51FD\u6570"));
    };
    _this.bindEventCallback = function (eventName, paramStr) {
      var onChange = _this.props.onChange;
      onChange({
        type: 'JSFunction',
        value: "function(){ return this." + eventName + ".apply(this,Array.prototype.slice.call(arguments).concat([" + (paramStr || '') + "])) }"
      });
    };
    return _this;
  }
  _inheritsLoose(FunctionSetter, _PureComponent);
  var _proto = FunctionSetter.prototype;
  _proto.componentDidMount = function componentDidMount() {
    this.emitEventName = SETTER_NAME + "-" + this.props.field.id;
    event.on("common:" + this.emitEventName + ".bindEvent", this.bindEvent);
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    event.off(this.emitEventName + ".bindEvent", this.bindEvent);
  };
  _proto.render = function render() {
    var _this2 = this;
    var value = this.props.value;
    var isShowDialog = this.state.isShowDialog;
    var functionName = '';
    if (value && value.value) {
      functionName = this.parseFunctionName(value.value);
    }
    var renderFunction;
    if (value) {
      if (functionName) {
        renderFunction = this.renderBindFunction;
      } else {
        renderFunction = this.renderEditFunctionButton;
      }
    } else {
      renderFunction = this.renderButton;
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "lc-function-setter"
    }, renderFunction(), value && value.value && /*#__PURE__*/React.createElement(_Dialog, {
      visible: isShowDialog,
      closeable: 'close',
      title: "\u51FD\u6570\u7F16\u8F91",
      onCancel: this.closeDialog,
      onOk: this.onDialogOk,
      onClose: function onClose() {
        _this2.closeDialog();
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        width: '500px',
        height: '400px'
      }
    }, /*#__PURE__*/React.createElement(MonacoEditor, _extends({
      value: js_beautify(value.value)
    }, defaultEditorOption, {
      language: 'javascript',
      onChange: function onChange(newCode) {
        return _this2.updateCode(newCode);
      }
    })))));
  };
  return FunctionSetter;
}(PureComponent);
FunctionSetter.defaultProps = {
  value: undefined,
  type: 'string',
  defaultValue: '',
  hasClear: true,
  placeholder: '请点击选择 Icon',
  onChange: function onChange() {
    return undefined;
  }
};
export { FunctionSetter as default };