"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
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 _utils = require("../../utils");
var _lowcodePluginBaseMonacoEditor = _interopRequireDefault(require("@alilc/lowcode-plugin-base-monaco-editor"));
var _icon = _interopRequireDefault(require("../../components/icon"));
var _locale = require("./locale");
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 cssConfig = (0, _locale.intlLocal)();
var defaultEditorOption = {
  readOnly: false,
  // automaticLayout: true,
  folding: true,
  // 默认开启折叠代码功能
  wordWrap: 'off',
  formatOnPaste: true,
  fontSize: 12,
  tabSize: 2,
  scrollBeyondLastLine: false,
  fixedOverflowWidgets: false,
  snippetSuggestions: 'top',
  minimap: {
    enabled: false
  },
  options: {
    lineNumbers: 'off',
    fixedOverflowWidgets: true,
    automaticLayout: true,
    glyphMargin: false,
    folding: false,
    lineDecorationsWidth: 0,
    lineNumbersMinChars: 0,
    hover: {
      enabled: false
    }
  },
  scrollbar: {
    horizontal: 'auto'
  }
};
var CssCode = exports["default"] = /*#__PURE__*/function (_React$Component) {
  function CssCode() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      defaultEditorProps: {},
      cssCode: '',
      isCanSave: true,
      height: '100px'
    };
    _this.styleSave = function () {
      var cssCode = _this.state.cssCode;
      var onStyleDataChange = _this.props.onStyleDataChange;
      var newStyleData = (0, _utils.parseToStyleData)(cssCode);
      // 检查是否和原来的styleData完全相同
      if (newStyleData) {
        onStyleDataChange(newStyleData);
        _this.setState({
          isCanSave: true
        });
      }
    };
    _this.updateCode = function (newCode) {
      _this.setState({
        cssCode: newCode
      });
      var newStyleData = (0, _utils.parseToStyleData)(newCode);
      if (newStyleData) {
        _this.setState({
          isCanSave: false
        });
      }
    };
    // 高度缓存
    _this.prevHeight = 80;
    return _this;
  }
  (0, _inheritsLoose2["default"])(CssCode, _React$Component);
  var _proto = CssCode.prototype;
  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var cssCode = (0, _utils.parseToCssCode)(nextProps.styleData);
    this.setState({
      cssCode: cssCode
    });
  };
  _proto.componentDidMount = function componentDidMount() {
    var styleData = this.props.styleData;
    if (document.body.clientWidth >= 1860) {
      this.setState({
        offsetX: -400
      });
    }
    var cssCode = (0, _utils.parseToCssCode)(styleData);
    // console.log('cssCode', cssCode);

    this.setState({
      cssCode: cssCode
    });
  };
  _proto.render = function render() {
    var _this2 = this;
    var _this$state = this.state,
      cssCode = _this$state.cssCode,
      defaultEditorProps = _this$state.defaultEditorProps,
      isCanSave = _this$state.isCanSave,
      height = _this$state.height;
    var handleEditorMount = function handleEditorMount(monaco, editor) {
      editor.onDidBlurEditorWidget(function () {
        _this2.styleSave();
      });
      editor.onDidChangeModelDecorations(function () {
        updateEditorHeight();
        // 控制刷新频率
        requestAnimationFrame(updateEditorHeight);
      });
      var updateEditorHeight = function updateEditorHeight() {
        var _editor$getModel;
        var padding = 20;
        var lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
        var lineCount = ((_editor$getModel = editor.getModel()) === null || _editor$getModel === void 0 ? void 0 : _editor$getModel.getLineCount()) || 1;
        var height = lineCount * lineHeight + padding;
        if (_this2.prevHeight !== height) {
          _this2.prevHeight = height;
          _this2.setState({
            height: height + "px"
          });
          editor.layout();
        }
      };
      // 挂载时先适配高度
      updateEditorHeight();
    };
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: '5px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }
    }, /*#__PURE__*/React.createElement(_icon["default"], {
      type: "icon-CSS"
    }), /*#__PURE__*/React.createElement(_button["default"], {
      type: "primary",
      onClick: this.styleSave,
      disabled: isCanSave,
      size: "small"
    }, cssConfig.save)), this.state.cssCode && /*#__PURE__*/React.createElement(_lowcodePluginBaseMonacoEditor["default"], (0, _extends2["default"])({
      value: cssCode
    }, defaultEditorProps, defaultEditorOption, {
      language: 'css',
      onChange: function onChange(newCode) {
        return _this2.updateCode(newCode);
      },
      editorDidMount: handleEditorMount,
      height: height
    })));
  };
  return CssCode;
}(React.Component);