"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
var _switch = _interopRequireDefault(require("@alifd/next/lib/switch"));
var _react = _interopRequireWildcard(require("react"));
var _type = require("../cDataSource-setter/type");
var _boxSlotComponent = _interopRequireDefault(require("./boxSlotComponent"));
var _lodash = require("lodash");
var _locale = require("../../../src/locale");
var _lowcodeEngineExt = _interopRequireDefault(require("@alilc/lowcode-engine-ext"));
var _index = _interopRequireDefault(require("../cUploadImage-setter/index"));
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 _AliLowCodeEngineExt$ = _lowcodeEngineExt["default"].setters,
  ColorSetter = _AliLowCodeEngineExt$.ColorSetter,
  StyleSetter = _AliLowCodeEngineExt$.StyleSetter,
  NumberSetter = _AliLowCodeEngineExt$.NumberSetter,
  IconSetter = _AliLowCodeEngineExt$.IconSetter;
var selectArr = [{
  label: (0, _locale.t)("setter.messageError"),
  value: _type.MessageModeType.error
}, {
  label: (0, _locale.t)("setter.messageSuccess"),
  value: _type.MessageModeType.success
}, {
  label: (0, _locale.t)("setter.messageWarning"),
  value: _type.MessageModeType.warning
}, {
  label: (0, _locale.t)("setter.messageNotice"),
  value: _type.MessageModeType.notice
}, {
  label: (0, _locale.t)("setter.messageHelp"),
  value: _type.MessageModeType.help
}, {
  label: (0, _locale.t)("setter.messageLoading"),
  value: _type.MessageModeType.loading
}];
var selectsIconMode = [{
  label: 'Icon',
  value: 'icon'
}, {
  label: 'Image',
  value: 'image'
}];
var CMessageConfigSetter = function CMessageConfigSetter(props) {
  var value = props.value,
    onChange = props.onChange,
    tipOptions = props.tipOptions;
  var _useState = (0, _react.useState)(true),
    showOpenType = _useState[0],
    setShowOpenType = _useState[1];
  var _useState2 = (0, _react.useState)(value.openType || false),
    openType = _useState2[0],
    setOpenType = _useState2[1];
  var _useState3 = (0, _react.useState)(value.modeTypeList || []),
    modeTypeList = _useState3[0],
    setModeTypeList = _useState3[1];
  var _useState4 = (0, _react.useState)(value.contentList || []),
    contentList = _useState4[0],
    setContentList = _useState4[1];
  var _useState5 = (0, _react.useState)(value.bgColorList || []),
    bgColorList = _useState5[0],
    setBgColorList = _useState5[1];
  var _useState6 = (0, _react.useState)(value.textColor || []),
    textColor = _useState6[0],
    setTextColor = _useState6[1];
  var _useState7 = (0, _react.useState)(value.borderRadius || []),
    borderRadius = _useState7[0],
    setBorderRadius = _useState7[1];
  var _useState8 = (0, _react.useState)(value.borderColor || []),
    borderColor = _useState8[0],
    setBorderColor = _useState8[1];
  var _useState9 = (0, _react.useState)(value.iconList || []),
    iconList = _useState9[0],
    setiIconList = _useState9[1];
  var _useState10 = (0, _react.useState)(value.imgIcon || []),
    imgIcon = _useState10[0],
    setImageIcon = _useState10[1];
  var _useState11 = (0, _react.useState)(value.iconMode || []),
    iconMode = _useState11[0],
    setIconMode = _useState11[1];
  var tipOptionsList = tipOptions ? tipOptions : selectArr;
  var dictionaryList = window.ruleOSDictionaryList;
  (0, _react.useEffect)(function () {
    if (props.hideOpentype) {
      setShowOpenType(false);
      setOpenType(true);
    }
  }, [props.hideOpentype]);
  (0, _react.useEffect)(function () {
    onChange({
      openType: openType,
      modeTypeList: modeTypeList,
      contentList: contentList,
      bgColorList: bgColorList,
      textColor: textColor,
      borderRadius: borderRadius,
      borderColor: borderColor,
      iconList: iconList,
      imgIcon: imgIcon,
      iconMode: iconMode
    });
  }, [openType, modeTypeList, contentList, bgColorList, textColor, borderRadius, borderColor, iconList, imgIcon, iconMode]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "cLoadingConfigSetter-box"
  }, showOpenType && /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (0, _locale.t)("setter.openTip")
  }, /*#__PURE__*/_react["default"].createElement(_switch["default"], {
    checked: openType,
    onChange: function onChange(v) {
      setOpenType(v);
    }
  })), openType && /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (0, _locale.t)("setter.feedbackType")
  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
    mode: "multiple",
    placeholder: (0, _locale.t)("setter.selectPlaceHolder"),
    notFoundContent: (0, _locale.t)('setter.notFoundContent'),
    hasClear: true,
    value: modeTypeList,
    dataSource: tipOptionsList,
    style: {
      width: 100 + "%",
      minWidth: 0
    },
    onChange: function onChange(e) {
      setModeTypeList(e ? e : []);
    }
  })), openType && /*#__PURE__*/_react["default"].createElement("div", {
    className: "content-list"
  }, modeTypeList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      key: item,
      title: item + " " + (0, _locale.t)("setter.content")
    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
      placeholder: (0, _locale.t)("setter.selectPlaceHolder"),
      notFoundContent: (0, _locale.t)('setter.notFoundContent'),
      value: contentList[index],
      style: {
        width: 100 + "%",
        minWidth: 0
      },
      onChange: function onChange(e) {
        var newContentList = (0, _lodash.cloneDeep)(contentList);
        newContentList[index] = e;
        setContentList(newContentList);
      }
    }, dictionaryList.map(function (item) {
      return /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
        value: item.value,
        key: item.id
      }, item.label);
    })));
  })), openType && /*#__PURE__*/_react["default"].createElement("div", {
    className: "content-list"
  }, modeTypeList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)("setter.msgBgColor")
    }, /*#__PURE__*/_react["default"].createElement(ColorSetter, {
      value: bgColorList[index],
      onChange: function onChange(e) {
        var newBgColorList = (0, _lodash.cloneDeep)(bgColorList);
        newBgColorList[index] = e;
        setBgColorList(newBgColorList);
      }
    }));
  })), openType && /*#__PURE__*/_react["default"].createElement("div", {
    className: "content-list"
  }, modeTypeList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)("setter.textColor")
    }, /*#__PURE__*/_react["default"].createElement(ColorSetter, {
      value: textColor[index],
      onChange: function onChange(e) {
        var newTextColor = (0, _lodash.cloneDeep)(textColor);
        newTextColor[index] = e;
        setTextColor(newTextColor);
      }
    }));
  })), openType && /*#__PURE__*/_react["default"].createElement("div", {
    className: "content-list"
  }, modeTypeList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)("setter.borderColor")
    }, /*#__PURE__*/_react["default"].createElement(ColorSetter, {
      value: borderColor[index],
      onChange: function onChange(e) {
        var newBorderColor = (0, _lodash.cloneDeep)(borderColor);
        newBorderColor[index] = e;
        setBorderColor(newBorderColor);
      }
    }));
  })), openType && /*#__PURE__*/_react["default"].createElement("div", {
    className: "content-list"
  }, modeTypeList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)("setter.borderRadius")
    }, /*#__PURE__*/_react["default"].createElement(NumberSetter, {
      style: {
        width: "100%"
      },
      placeholder: (0, _locale.t)("setter.inputPlaceHolder"),
      value: borderRadius[index],
      onChange: function onChange(e) {
        var newBorderRadius = (0, _lodash.cloneDeep)(borderRadius);
        newBorderRadius[index] = e;
        setBorderRadius(newBorderRadius);
      }
    }));
  })), openType && /*#__PURE__*/_react["default"].createElement("div", {
    className: "content-list"
  }, modeTypeList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)("setter.iconList")
    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
      placeholder: (0, _locale.t)("setter.selectPlaceHolder"),
      notFoundContent: (0, _locale.t)('setter.notFoundContent'),
      hasClear: true,
      value: iconMode[index],
      dataSource: selectsIconMode,
      style: {
        width: 100 + "%",
        marginBottom: '8px'
      },
      onChange: function onChange(e) {
        var newIconMode = (0, _lodash.cloneDeep)(iconMode);
        newIconMode[index] = e;
        setImageIcon([]);
        setiIconList([]);
        setIconMode(newIconMode);
      }
    }), iconMode[0] === 'icon' ? /*#__PURE__*/_react["default"].createElement(IconSetter, {
      placeholder: (0, _locale.t)("setter.inputPlaceHolder"),
      value: iconList[index],
      onChange: function onChange(e) {
        var newIconList = (0, _lodash.cloneDeep)(iconList);
        newIconList[index] = e;
        setiIconList(newIconList);
      }
    }) : /*#__PURE__*/_react["default"].createElement(_index["default"], {
      value: imgIcon[index],
      onUpload: function onUpload(e) {
        var newimgIcon = (0, _lodash.cloneDeep)(imgIcon);
        newimgIcon[index] = e;
        setImageIcon(newimgIcon);
      }
    }));
  })));
};
var _default = exports["default"] = /*#__PURE__*/function (_Component) {
  function _default() {
    return _Component.apply(this, arguments) || this;
  }
  (0, _inheritsLoose2["default"])(_default, _Component);
  var _proto = _default.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/_react["default"].createElement(CMessageConfigSetter, this.props);
  };
  return _default;
}(_react.Component);