"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _configProvider = _interopRequireDefault(require("@alifd/next/lib/config-provider"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
var _layout = _interopRequireDefault(require("./pro/layout"));
var _position = _interopRequireDefault(require("./pro/position"));
var _font = _interopRequireDefault(require("./pro/font"));
var _border = _interopRequireDefault(require("./pro/border"));
var _background = _interopRequireDefault(require("./pro/background"));
var _cssCode = _interopRequireDefault(require("./components/css-code"));
var _enUs = _interopRequireDefault(require("@alifd/next/lib/locale/en-us"));
var _zhCn = _interopRequireDefault(require("@alifd/next/lib/locale/zh-cn"));
var _lowcodeEngine = require("@alilc/lowcode-engine");
require("./index.less");
var _common$utils$createI, _common$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 _ref = ((_common$utils$createI = (_common$utils = _lowcodeEngine.common.utils).createIntl) === null || _common$utils$createI === void 0 ? void 0 : _common$utils$createI.call(_common$utils)) || {},
  getLocale = _ref.getLocale;
var locale = (getLocale === null || getLocale === void 0 ? void 0 : getLocale()) || 'zh-CN';
var localeSource = {
  'en-US': _enUs["default"],
  'zh-CN': _zhCn["default"]
};
var StyleSetterV2 = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
  function StyleSetterV2() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      styleData: {},
      cssCodeVisiable: false,
      initFlag: false
    };
    _this.changeCssCodeVisiable = function (visible) {
      _this.setState({
        cssCodeVisiable: !visible
      });
    };
    /**
     * style更改
     * @param styleKey
     * @param value
     */
    _this.onStyleChange = function (styleDataList) {
      var onChange = _this.props.onChange;
      var styleData = Object.assign({}, _this.state.styleData);
      styleDataList && styleDataList.map(function (item) {
        if (item.value == undefined || item.value == null) {
          delete styleData[item.styleKey];
        } else {
          styleData[item.styleKey] = item.value;
        }
      });
      _this.setState({
        styleData: styleData
      });
      onChange && onChange(styleData);
      console.log(styleData);
    };
    _this.onStyleDataChange = function (styleData) {
      _this.setState({
        styleData: styleData
      });
      var onChange = _this.props.onChange;
      onChange && onChange(styleData);
    };
    return _this;
  }
  (0, _inheritsLoose2["default"])(StyleSetterV2, _React$PureComponent);
  var _proto = StyleSetterV2.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var value = this.props.value;
    if (value) {
      this.setState({
        styleData: value
      });
    }
    this.setState({
      initFlag: true
    });
  };
  _proto.render = function render() {
    var _this$props = this.props,
      isShowCssCode = _this$props.isShowCssCode,
      showModuleList = _this$props.showModuleList;
    var _this$state = this.state,
      styleData = _this$state.styleData,
      cssCodeVisiable = _this$state.cssCodeVisiable,
      initFlag = _this$state.initFlag;
    return /*#__PURE__*/React.createElement(_configProvider["default"], {
      locale: localeSource[locale]
    }, /*#__PURE__*/React.createElement("div", {
      className: "lowcode-setter-style-v2"
    }, isShowCssCode && /*#__PURE__*/React.createElement("div", {
      className: "top-bar"
    }, /*#__PURE__*/React.createElement(_cssCode["default"], {
      styleData: styleData,
      onStyleDataChange: this.onStyleDataChange
    })), showModuleList.filter(function (item) {
      return item == 'layout';
    }).length > 0 && /*#__PURE__*/React.createElement(_layout["default"], (0, _extends2["default"])({
      onStyleChange: this.onStyleChange,
      styleData: styleData
    }, this.props)), showModuleList.filter(function (item) {
      return item == 'font';
    }).length > 0 && /*#__PURE__*/React.createElement(_font["default"], (0, _extends2["default"])({
      onStyleChange: this.onStyleChange,
      styleData: styleData
    }, this.props)), showModuleList.filter(function (item) {
      return item == 'background';
    }).length > 0 && /*#__PURE__*/React.createElement(_background["default"], (0, _extends2["default"])({
      onStyleChange: this.onStyleChange,
      styleData: styleData
    }, this.props)), showModuleList.filter(function (item) {
      return item == 'position';
    }).length > 0 && /*#__PURE__*/React.createElement(_position["default"], (0, _extends2["default"])({
      onStyleChange: this.onStyleChange,
      styleData: styleData
    }, this.props)), showModuleList.filter(function (item) {
      return item == 'border';
    }).length > 0 && /*#__PURE__*/React.createElement(_border["default"], (0, _extends2["default"])({
      onStyleChange: this.onStyleChange,
      styleData: styleData
    }, this.props))));
  };
  return StyleSetterV2;
}(React.PureComponent);
StyleSetterV2.defaultProps = {
  // 默认单位
  unit: 'px',
  // 默认计算尺寸缩放
  placeholderScale: 1,
  // 展示板块
  showModuleList: ['background', 'border', 'font', 'layout', 'position'],
  // 是否展示css源码编辑面板
  isShowCssCode: true,
  // layout 配置面板
  layoutPropsConfig: {
    // display 展示列表
    showDisPlayList: ['inline', 'flex', 'block', 'inline-block', 'none'],
    isShowPadding: true,
    isShowMargin: true,
    isShowWidthHeight: true
  },
  fontPropsConfig: {
    // fontFamily列表
    fontFamilyList: [{
      value: 'Helvetica',
      label: 'Helvetica'
    }, {
      value: 'Arial',
      label: 'Arial'
    }, {
      value: 'serif',
      label: 'serif'
    }]
  },
  // position 配置面板
  positionPropsConfig: {
    isShowFloat: true,
    isShowClear: true
  }
};