import _Balloon from "@alifd/next/es/balloon";
import _extends from "@babel/runtime/helpers/extends";
import _Button from "@alifd/next/es/button";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import { parseToCssCode, parseToStyleData } from '../../utils';
import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor';
import { intlLocal } from './locale';
var cssConfig = 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 = /*#__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 = {
      showDialog: false,
      defaultEditorProps: {},
      cssCode: '',
      isCanSave: true,
      height: 1000
    };
    _this.styleSave = function () {
      var cssCode = _this.state.cssCode;
      var onStyleDataChange = _this.props.onStyleDataChange;
      var newStyleData = parseToStyleData(cssCode);
      // 检查是否和原来的styleData完全相同
      if (newStyleData) {
        onStyleDataChange(newStyleData);
        _this.setState({
          isCanSave: true
        });
      }
    };
    _this.updateCode = function (newCode) {
      _this.setState({
        cssCode: newCode
      });
      var newStyleData = parseToStyleData(newCode);
      if (newStyleData) {
        _this.setState({
          isCanSave: false
        });
      }
    };
    _this.showDrawer = function () {
      _this.setState({
        showDialog: true
      });
    };
    _this.closeDrawer = function () {
      _this.setState({
        showDialog: false
      });
      _this.styleSave();
    };
    // 高度缓存
    _this.prevHeight = 80;
    return _this;
  }
  _inheritsLoose(CssCode, _React$Component);
  var _proto = CssCode.prototype;
  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var cssCode = 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 = 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", {
      style: {
        padding: "0 12px"
      }
    }, /*#__PURE__*/React.createElement(_Balloon, {
      v2: true,
      triggerType: "click",
      title: "\u5F0F\u6837\u6E90\u7801\u7F16\u8F91",
      trigger: /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        style: {
          width: "100%"
        }
      }, "\u7F16\u8F91\u6E90\u7801"),
      align: "lb",
      popupStyle: {
        maxWidth: 500,
        width: 500,
        height: 600
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        width: "100",
        height: "100%"
      }
    }, this.state.cssCode && /*#__PURE__*/React.createElement(MonacoEditor, _extends({
      value: cssCode
    }, defaultEditorProps, defaultEditorOption, {
      language: 'css',
      onChange: function onChange(newCode) {
        return _this2.updateCode(newCode);
      },
      editorDidMount: handleEditorMount,
      height: "520px"
    })))));
  };
  return CssCode;
}(React.Component);
export { CssCode as default };