"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _overlay = _interopRequireDefault(require("@alifd/next/lib/overlay"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _lowcodeEngine = require("@alilc/lowcode-engine");
var _lowcodePluginBaseMonacoEditor = _interopRequireDefault(require("@alilc/lowcode-plugin-base-monaco-editor"));
require("./index.less");
var _utils = require("./utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var defaultEditorProps = {
  width: '100%',
  height: '150px'
};
var defaultEditorOption = {
  options: {
    readOnly: false,
    automaticLayout: true,
    folding: false,
    // 默认开启折叠代码功能
    lineNumbers: 'off',
    wordWrap: 'on',
    formatOnPaste: true,
    fontSize: 12,
    tabSize: 2,
    scrollBeyondLastLine: false,
    fixedOverflowWidgets: false,
    snippetSuggestions: 'top',
    minimap: {
      enabled: false
    },
    scrollbar: {
      vertical: 'auto',
      horizontal: 'auto',
      verticalScrollbarSize: 0
    }
  }
};
var SimpleVariableBindPopup = exports["default"] = /*#__PURE__*/function (_Component) {
  function SimpleVariableBindPopup() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.state = {
      visiable: false,
      isOverFlowMaxSize: false,
      jsCode: '',
      field: {},
      // 编辑器全局变量
      treeList: [],
      minimize: false,
      // 是否最小化
      autoExpandParent: true,
      maxTextSize: 0,
      // 绑定变量最大字符数
      node: null // 触发的节点
    };
    _this.editorJsRef = /*#__PURE__*/_react["default"].createRef();
    _this.nodeRef = null;
    _this.overlayRef = /*#__PURE__*/_react["default"].createRef();
    _this.initCode = function () {
      var _this$props$config;
      var field = _this.state.field;
      var fieldValue = field.getValue();
      var jsCode = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value;
      var _ref = ((_this$props$config = _this.props.config) === null || _this$props$config === void 0 ? void 0 : _this$props$config.props) || {},
        maxTextSize = _ref.maxTextSize;
      _this.setState({
        jsCode: jsCode,
        // fullScreenStatus: false,
        minimize: false,
        // 是否最小化
        isOverFlowMaxSize: false,
        // 配置的最大文本长度，默认为0，不控制
        maxTextSize: maxTextSize ? maxTextSize : 0
      });
    };
    _this.openDialog = function () {
      _this.setState({
        visiable: true
      });
    };
    _this.closeDialog = function () {
      _this.setState({
        visiable: false,
        minimize: false
      });
    };
    _this.updateCode = function (newCode) {
      var isOverFlowMaxSize = false;
      if (_this.state.maxTextSize) {
        isOverFlowMaxSize = (newCode === null || newCode === void 0 ? void 0 : newCode.length) > _this.state.maxTextSize;
      }
      _this.setState({
        jsCode: newCode,
        isOverFlowMaxSize: isOverFlowMaxSize
      }, _this.autoSave);
      console.log('size====', newCode === null || newCode === void 0 ? void 0 : newCode.length);
    };
    _this.autoSave = function () {
      var autoSave = _this.props.autoSave;
      if (autoSave) {
        _this.onOk(true);
      }
    };
    _this.editorDidMount = function () {
      setTimeout(function () {
        _this.editorNode = _this.editorJsRef.current; // 记录当前dom节点；
      }, 0);
    };
    _this.onOk = function (autoSave) {
      var _this$state = _this.state,
        field = _this$state.field,
        jsCode = _this$state.jsCode;
      if (jsCode === undefined || (jsCode === null || jsCode === void 0 ? void 0 : jsCode.length) == 0) {
        return _this.removeTheBinding();
      }
      var fieldValue = field.getValue();
      field.setValue({
        type: 'JSExpression',
        value: jsCode,
        mock: Object.prototype.toString.call(fieldValue) === '[object Object]' ? fieldValue.mock : fieldValue
      });
      if (autoSave !== true) {
        _this.closeDialog();
      }
    };
    _this.removeTheBinding = function () {
      var field = _this.state.field;
      var fieldValue = field.getValue();
      var value = Object.prototype.toString.call(fieldValue) === '[object Object]' ? fieldValue.mock : fieldValue;
      console.debug('value', value, 'fieldValue', fieldValue, field);
      field.setValue(value);
      _this.closeDialog();
    };
    _this.renderBottom = function () {
      var jsCode = _this.state.jsCode;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "simple-bind-dialog-bottom"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "bottom-left-container"
      }, jsCode && jsCode.length > 0 && /*#__PURE__*/_react["default"].createElement(_button["default"], {
        type: "normal",
        warning: true,
        onClick: _this.removeTheBinding
      }, "\u79FB\u9664\u7ED1\u5B9A")), /*#__PURE__*/_react["default"].createElement("div", {
        className: "bottom-right-container"
      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
        type: "primary",
        onClick: _this.onOk,
        disabled: _this.isBtnDisable()
      }, "\u786E\u5B9A"), "\xA0\xA0", /*#__PURE__*/_react["default"].createElement(_button["default"], {
        type: "normal",
        onClick: _this.closeDialog
      }, "\u53D6\u6D88")));
    };
    _this.minimizeClick = function (state) {
      _this.setState({
        minimize: state,
        visiable: !state
      });
    };
    _this.renderErrorMessage = function () {
      var _this$state2 = _this.state,
        isOverFlowMaxSize = _this$state2.isOverFlowMaxSize,
        maxTextSize = _this$state2.maxTextSize;
      return isOverFlowMaxSize ? /*#__PURE__*/_react["default"].createElement("span", {
        className: "error-message"
      }, "\u8868\u8FBE\u5F0F\u6587\u672C\u4E0D\u80FD\u8D85\u8FC7", maxTextSize, "\u4E2A\u5B57\u7B26\uFF0C\u8BF7\u6362\u6210\u51FD\u6570\u8C03\u7528") : null;
    };
    _this.isBtnDisable = function () {
      var isOverFlowMaxSize = _this.state.isOverFlowMaxSize;
      return isOverFlowMaxSize;
    };
    return _this;
  }
  (0, _inheritsLoose2["default"])(SimpleVariableBindPopup, _Component);
  var _proto = SimpleVariableBindPopup.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;
    _lowcodeEngine.event.on('common:variableBindDialog.openDialog', function (_ref2) {
      var field = _ref2.field,
        node = _ref2.node;
      _this2.setState({
        field: field,
        node: node || _this2.nodeRef
      }, function () {
        _this2.initCode();
        _this2.openDialog();
      });
    });
  };
  _proto.render = function render() {
    var _this3 = this,
      _this$state$field;
    var _this$state3 = this.state,
      visiable = _this$state3.visiable,
      jsCode = _this$state3.jsCode,
      minimize = _this$state3.minimize,
      isOverFlowMaxSize = _this$state3.isOverFlowMaxSize;
    return /*#__PURE__*/_react["default"].createElement("div", null, minimize ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "vs-variable-minimize"
    }, /*#__PURE__*/_react["default"].createElement("img", {
      onClick: function onClick() {
        return _this3.minimizeClick(false);
      },
      src: "https://img.alicdn.com/imgextra/i2/O1CN01HzeCND1vl948xPEWm_!!6000000006212-55-tps-200-200.svg"
    }), /*#__PURE__*/_react["default"].createElement("span", {
      onClick: function onClick() {
        return _this3.minimizeClick(false);
      },
      className: "vs-variable-minimize-title"
    }, "\u53D8\u91CF\u7ED1\u5B9A"), /*#__PURE__*/_react["default"].createElement("img", {
      onClick: this.closeDialog,
      src: "https://img.alicdn.com/imgextra/i2/O1CN017cO64O1DzwlxwDSKW_!!6000000000288-55-tps-200-200.svg"
    })) : '', /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        position: 'absolute',
        top: 0,
        right: 100
      },
      ref: function ref(_ref3) {
        return _this3.nodeRef = _ref3;
      }
    }), this.state.node && /*#__PURE__*/_react["default"].createElement(_overlay["default"], {
      v2: true,
      key: (_this$state$field = this.state.field) === null || _this$state$field === void 0 ? void 0 : _this$state$field.id,
      visible: !minimize && visiable,
      onRequestClose: this.closeDialog,
      safeNode: [document.querySelector('.lc-left-area'), document.querySelector('.lc-left-fixed-pane')],
      target: function target() {
        return _this3.state.node;
      },
      offset: [-380, 0],
      onPosition: function onPosition() {
        (0, _utils.adjustOverlayPosition)(_this3.overlayRef.current, [20]);
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "simple-dialog-body",
      ref: this.overlayRef
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "dialog-right-container"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "dialog-small-title"
    }, "\u7ED1\u5B9A ", this.renderErrorMessage()), /*#__PURE__*/_react["default"].createElement("div", {
      id: "jsEditorDom",
      className: isOverFlowMaxSize ? "editor-context editor-context-error" : "editor-context",
      ref: this.editorJsRef
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "editor-type-tag"
    }, "="), /*#__PURE__*/_react["default"].createElement(_lowcodePluginBaseMonacoEditor["default"], (0, _extends2["default"])({
      value: jsCode
    }, defaultEditorProps, defaultEditorOption, {
      language: 'javascript',
      onChange: function onChange(newCode) {
        return _this3.updateCode(newCode);
      },
      editorDidMount: function editorDidMount(useMonaco, editor) {
        _this3.editorDidMount.call(_this3, editor, useMonaco);
      }
    })))), this.renderBottom())));
  };
  return SimpleVariableBindPopup;
}(_react.Component);