import _extends from "@babel/runtime/helpers/extends";
import _Dialog from "@alifd/next/es/dialog";
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 PropTypes from 'prop-types';

import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor';
import CustomIcon from '../../components/custom-icon';
import { js_beautify } from 'js-beautify';
import { intl } from './locale';
var defaultEditorOption = {
  width: '100%',
  height: '400px',
  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
  },
  throttle: 0,
  scrollbar: {
    vertical: 'auto',
    horizontal: 'auto'
  }
};
var JsonSetter = /*#__PURE__*/function (_PureComponent) {
  function JsonSetter() {
    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.datasourceCode = '';
    _this.state = {
      isShowDialog: false,
      value: JSON.stringify(_this.props.value)
    };
    _this.openDialog = function () {
      var value = _this.state.value;
      _this.setState({
        isShowDialog: true
      });
      _this.datasourceCode = value;
    };
    _this.closeDialog = function () {
      _this.setState({
        isShowDialog: false
      });
    };
    /**
     * 渲染按钮
     */
    _this.renderButton = function (value) {
      return !value ? /*#__PURE__*/React.createElement(_Button, {
        size: "small",
        type: "normal",
        onClick: _this.openDialog
      }, intl('BindingData')) : /*#__PURE__*/React.createElement(_Button, {
        size: "small",
        type: "primary",
        onClick: _this.openDialog
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "edit"
      }), intl('EditData'));
    };
    _this.updateCode = function (newCode) {
      _this.datasourceCode = newCode;
    };
    _this.onDialogOk = function () {
      var _this$props = _this.props,
        onChange = _this$props.onChange,
        removeProp = _this$props.removeProp;
      if (_this.datasourceCode && _this.datasourceCode != '') {
        try {
          onChange(JSON.parse(_this.datasourceCode));
          _this.closeDialog();
        } catch (e) {
          _Dialog.alert({
            title: intl('FailedToSaveData'),
            content: e.message
          });
        }
      } else {
        removeProp();
        _this.closeDialog();
      }
    };
    /**
     * 渲染编辑函数按钮(可直接编辑函数内容)
     */
    _this.renderEditFunctionButton = function () {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
        size: "small",
        type: "primary",
        onClick: _this.openDialog
      }, /*#__PURE__*/React.createElement(CustomIcon, {
        type: "icon-ic_edit"
      }), intl('EditData')));
    };
    return _this;
  }
  _inheritsLoose(JsonSetter, _PureComponent);
  var _proto = JsonSetter.prototype;
  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var nextValue = JSON.stringify(nextProps.value);
    if (nextValue !== this.state.value) {
      this.setState({
        value: nextValue
      });
    }
  };
  _proto.render = function render() {
    var _this2 = this;
    var value = this.state.value;
    var isShowDialog = this.state.isShowDialog;
    return /*#__PURE__*/React.createElement("div", null, this.renderButton(value), /*#__PURE__*/React.createElement(_Dialog, {
      visible: isShowDialog,
      closeable: 'close',
      title: intl('EditData'),
      onCancel: this.closeDialog,
      onOk: this.onDialogOk,
      onClose: function onClose() {
        _this2.closeDialog();
      },
      cancelProps: {
        children: intl('Cancel')
      },
      okProps: {
        children: intl('Confirm')
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        width: '500px',
        height: '400px'
      }
    }, /*#__PURE__*/React.createElement(MonacoEditor, _extends({
      value: js_beautify(value)
    }, defaultEditorOption, {
      language: 'json',
      onChange: function onChange(newCode) {
        return _this2.updateCode(newCode);
      }
    })))));
  };
  return JsonSetter;
}(PureComponent);
JsonSetter.displayName = 'JsonSetter';
export { JsonSetter as default };