"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
var _range = _interopRequireDefault(require("@alifd/next/lib/range"));
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
var _react = _interopRequireWildcard(require("react"));
var _row = _interopRequireDefault(require("../../components/row"));
var _icon = _interopRequireDefault(require("../../components/icon"));
var _number = _interopRequireDefault(require("../../components/number"));
var _colorInput = _interopRequireDefault(require("../../components/color-input"));
var _utils = require("../../utils");
var _locale = require("./locale");
require("./index.less");
var _constant = require("./constant");
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 backgroundConfig = (0, _locale.intlLocal)();
var Panel = _collapse["default"].Panel;
var _default = exports["default"] = function _default(props) {
  var onStyleChange = props.onStyleChange,
    styleData = props.styleData;
  var backgroundType = backgroundConfig.backgroundType,
    backgroundSize = backgroundConfig.backgroundSize,
    backgroundPosition = backgroundConfig.backgroundPosition,
    backgroundRepeat = backgroundConfig.backgroundRepeat;
  var _useState = (0, _react.useState)(null),
    bgType = _useState[0],
    setBgType = _useState[1];
  var _useState2 = (0, _react.useState)(null),
    bgSizeType = _useState2[0],
    setBgSizeType = _useState2[1];
  var _useState3 = (0, _react.useState)(null),
    bgRepeatType = _useState3[0],
    setBgRepeatType = _useState3[1];
  var _useState4 = (0, _react.useState)(''),
    bgPositionType = _useState4[0],
    setBgPositionType = _useState4[1];
  // 背景类型切换
  var onBgTypeChange = function onBgTypeChange(styleDataList) {
    if (styleDataList) {
      setBgType(styleDataList[0].value);
    }
  };
  // 背景图片切换
  var onBgImageChange = function onBgImageChange(value) {
    onStyleChange([{
      styleKey: 'backgroundImage',
      value: formatBgImgUrl(value)
    }]);
  };
  // backgroundSize类型切换
  var onBgSizeTypeChange = function onBgSizeTypeChange(styleDataList) {
    var backgroundSize = 'backgroundSize';
    onStyleChange([{
      styleKey: backgroundSize,
      value: null
    }]);
    if (styleDataList) {
      var _styleDataList$;
      var value = (_styleDataList$ = styleDataList[0]) === null || _styleDataList$ === void 0 ? void 0 : _styleDataList$.value;
      setBgSizeType(value);
      if (value != _constant.backgroundSizeMap["default"]) {
        onStyleChange([{
          styleKey: backgroundSize,
          value: value
        }]);
      }
    }
  };
  // backgroundSize值切换
  var onBgSizeChange = function onBgSizeChange(styleKey, value, unit, styleData, direction) {
    var _unifyStyle;
    var bgSizeArray = styleData[styleKey] ? (_unifyStyle = (0, _utils.unifyStyle)(styleData[styleKey])) === null || _unifyStyle === void 0 ? void 0 : _unifyStyle.split(' ') : ['auto', 'auto'];
    var _bgSizeArray$ = bgSizeArray[0],
      width = _bgSizeArray$ === void 0 ? 'auto' : _bgSizeArray$,
      _bgSizeArray$2 = bgSizeArray[1],
      height = _bgSizeArray$2 === void 0 ? 'auto' : _bgSizeArray$2;
    var styleDataList;
    if (styleData) {
      var unifiedValue = unit ? (0, _utils.addUnit)(value, unit) : value;
      if (unifiedValue === null || unifiedValue === undefined) unifiedValue = 'auto'; // 空样式默认为auto
      if (direction === 'width') {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + " " + height : null // 都为auto则删除样式
        }];
      } else {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || width !== 'auto' ? width + " " + unifiedValue : null
        }];
      }
      onStyleChange(styleDataList);
    }
  };
  // backgroundRepeat切换
  var onBgRepeatChange = function onBgRepeatChange(styleDataList) {
    if (styleDataList) {
      var _styleDataList$2;
      var value = (_styleDataList$2 = styleDataList[0]) === null || _styleDataList$2 === void 0 ? void 0 : _styleDataList$2.value;
      setBgRepeatType(value);
      onStyleChange([{
        styleKey: 'backgroundRepeat',
        value: value
      }]);
    }
  };

  // backgroundPosition切换
  var onBgPositionChange = function onBgPositionChange(styleKey, value, unit, styleData, direction) {
    var bgSizeArray = styleData[styleKey] ? (0, _utils.unifyStyle)(styleData[styleKey]).split(' ') : ['auto', 'auto'];
    var _bgSizeArray$3 = bgSizeArray[0],
      width = _bgSizeArray$3 === void 0 ? 'auto' : _bgSizeArray$3,
      _bgSizeArray$4 = bgSizeArray[1],
      height = _bgSizeArray$4 === void 0 ? 'auto' : _bgSizeArray$4;
    var styleDataList;
    if (styleData) {
      var unifiedValue = /^-?[0-9]\d*$/.test(value) ? value + unit : value; // 正则匹配非0数字并加单位
      if (unifiedValue === null || unifiedValue === undefined || unifiedValue.replace(/\s*/g, '') === '' // 空格和空字符串也为空值
      ) {
        unifiedValue = 'auto';
      }
      if (direction === 'horizontal') {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + " " + height : null
        }];
      } else {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || width !== 'auto' ? width + " " + unifiedValue : null
        }];
      }
      onStyleChange(styleDataList);
    }
  };
  // 透明度切换
  var onOpacityChange = function onOpacityChange(styleKey, value, unit) {
    onStyleChange([{
      styleKey: styleKey,
      value: unit ? (0, _utils.addUnit)(value, unit) : value
    }]);
  };
  var initData = function initData() {
    if (styleData.backgroundColor) {
      setBgType('color');
    } else if (styleData.backgroundImage) {
      setBgType('bgImg');
    } else {
      setBgType(null);
    }
    setBgRepeatType(styleData.backgroundRepeat);
    var bgSizeType = styleData.backgroundSize === _constant.backgroundSizeMap.contain || styleData.backgroundSize === _constant.backgroundSizeMap.cover ? styleData.backgroundSize : _constant.backgroundSizeMap["default"];
    setBgSizeType(bgSizeType);
    var chosenItem = backgroundPosition.dataList.find(function (item) {
      return item.position === styleData.backgroundPosition;
    });
    setBgPositionType(chosenItem === null || chosenItem === void 0 ? void 0 : chosenItem.title);
  };
  (0, _react.useEffect)(function () {
    initData();
  }, [styleData]);
  var formatBgImgUrl = function formatBgImgUrl(url) {
    if (url && url != '') {
      return "url(" + url + ")";
    } else {
      return null;
    }
  };
  var backToBgImgUrl = function backToBgImgUrl(styleUrl) {
    if (styleUrl) {
      // const reg = /^url\(.*\)/;
      // var result = styleUrl.match(reg);
      var newUrl = styleUrl.substring(styleUrl.indexOf('(') + 1, styleUrl.indexOf(')'));
      return newUrl;
      // return styleUrl.substring(
      //   styleUrl.indexOf("(") + 1,
      //   styleUrl.indexOf(")") - 1
      // );
    } else {
      return '';
    }
  };
  return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
    defaultExpandedKeys: ['0']
  }, /*#__PURE__*/_react["default"].createElement(Panel, {
    title: backgroundConfig.title,
    className: "font-style-container"
  }, /*#__PURE__*/_react["default"].createElement(_row["default"], (0, _extends2["default"])({
    title: backgroundType.title,
    dataList: backgroundType.dataList,
    styleKey: ""
  }, props, {
    onStyleChange: onBgTypeChange,
    value: bgType
  })), bgType == 'color' && /*#__PURE__*/_react["default"].createElement(_row["default"], (0, _extends2["default"])({
    title: ' ',
    styleKey: ""
  }, props), /*#__PURE__*/_react["default"].createElement(_colorInput["default"], (0, _extends2["default"])({
    styleKey: 'backgroundColor'
  }, props, {
    inputWidth: "100%"
  }))), bgType == 'bgImg' && /*#__PURE__*/_react["default"].createElement(_row["default"], (0, _extends2["default"])({
    title: ' ',
    styleKey: ""
  }, props), /*#__PURE__*/_react["default"].createElement(_input["default"], {
    innerBefore: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "icon-suffix-url",
      style: {
        margin: 4
      }
    }),
    placeholder: backgroundConfig.inputPlaceholder,
    style: {
      width: '100%'
    },
    value: backToBgImgUrl(styleData.backgroundImage),
    onChange: onBgImageChange
  })), bgType == 'bgImg' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_row["default"], (0, _extends2["default"])({
    title: backgroundSize.title,
    dataList: backgroundSize.dataList
  }, props, {
    onStyleChange: onBgSizeTypeChange,
    value: bgSizeType
  })), bgSizeType == _constant.backgroundSizeMap["default"] && /*#__PURE__*/_react["default"].createElement("div", {
    className: "inner-row-contaienr-bgsize"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "row-item-title"
  }, backgroundConfig.width), /*#__PURE__*/_react["default"].createElement(_number["default"], (0, _extends2["default"])({
    style: {
      marginRight: '4px'
    },
    min: 0,
    styleKey: "backgroundSize"
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgSizeChange(styleKey, val, unit, styleData, 'width');
    },
    multiProp: 0,
    defaultPlaceholder: 'auto'
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "row-item-title"
  }, backgroundConfig.height), /*#__PURE__*/_react["default"].createElement(_number["default"], (0, _extends2["default"])({
    styleKey: "backgroundSize",
    min: 0
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgSizeChange(styleKey, val, unit, styleData, 'height');
    },
    multiProp: 1,
    defaultPlaceholder: 'auto'
  })))), /*#__PURE__*/_react["default"].createElement(_row["default"], (0, _extends2["default"])({
    title: backgroundPosition.title,
    styleKey: "border"
  }, props), /*#__PURE__*/_react["default"].createElement("div", {
    className: "background-position-container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "background-position-container-left"
  }, backgroundPosition.dataList.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: bgPositionType === item.title ? 'sel-icon' : '',
      onClick: function onClick() {
        setBgPositionType(item.title);
        onStyleChange([{
          styleKey: 'backgroundPosition',
          value: item.position
        }]);
      }
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      className: "background-position-icon",
      type: item.icon
    }));
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "background-position-container-right"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "background-position-left"
  }, /*#__PURE__*/_react["default"].createElement("span", null, backgroundConfig.left), /*#__PURE__*/_react["default"].createElement(_number["default"], (0, _extends2["default"])({
    style: {
      marginLeft: '10px'
    },
    styleKey: "backgroundPosition"
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgPositionChange(styleKey, val, unit, styleData, 'horizontal');
    },
    multiProp: 0,
    defaultPlaceholder: 'auto'
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "background-position-top"
  }, /*#__PURE__*/_react["default"].createElement("span", null, backgroundConfig.top), /*#__PURE__*/_react["default"].createElement(_number["default"], (0, _extends2["default"])({
    style: {
      marginLeft: '10px'
    },
    min: -10,
    styleKey: "backgroundPosition"
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgPositionChange(styleKey, val, unit, styleData, 'verticle');
    },
    multiProp: 1,
    defaultPlaceholder: 'auto'
  })))))), /*#__PURE__*/_react["default"].createElement(_row["default"], (0, _extends2["default"])({
    title: backgroundRepeat.title,
    dataList: backgroundRepeat.dataList,
    styleKey: ""
  }, props, {
    onStyleChange: onBgRepeatChange,
    value: bgRepeatType
  }))), /*#__PURE__*/_react["default"].createElement(_row["default"], (0, _extends2["default"])({
    title: backgroundConfig.opacity,
    styleKey: "opacity"
  }, props), /*#__PURE__*/_react["default"].createElement("div", {
    className: "opacity-container"
  }, /*#__PURE__*/_react["default"].createElement(_range["default"], {
    disabled: (0, _utils.isCssVarBind)(styleData.opacity),
    style: {
      marginLeft: '10px',
      marginRight: '10px',
      width: '104px'
    },
    value: !(0, _utils.isEmptyValue)(styleData.opacity) ? styleData.opacity * 100 : 0,
    onChange: function onChange(val) {
      return onOpacityChange('opacity', parseInt(val) / 100);
    }
  }), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
    value: !(0, _utils.isEmptyValue)(styleData.opacity) && !(0, _utils.isCssVarBind)(styleData.opacity) ? Math.floor(styleData.opacity * 100) : undefined,
    disabled: (0, _utils.isCssVarBind)(styleData.opacity),
    max: 100,
    min: 0,
    onChange: function onChange(val) {
      return onOpacityChange('opacity', (0, _utils.isEmptyValue)(val) ? null : val / 100);
    },
    innerAfter: '%'
  })))));
};