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