import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { TextField } from '../TextField/index.js';
import Label from '../Label/index.js';
import HelperText from '../HelperText/index.js';
import Delete from '@iam-com/icons/Delete';
import PlusCircleF from '@iam-com/icons/PlusCircleF';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '@iam-com/lib';
import '@iam-com/icons/PreviewClose';
import '@iam-com/icons/PreviewOpen';
import '@iam-com/icons/CloseCircle';
import '../AutoTips/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '../Loading/index.js';
import '@iam-com/icons/LoadingF';
import '../_verture/useGlobalProps-1b846a65.js';
import '@para-ui/core/GlobalContext';
import '../_verture/index-fac03ce3.js';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';
import '../Help/index.js';
import '@iam-com/icons/Help';

var en = {
  add: 'Newly Added'
};

var zh = {
  add: '新增'
};

var localeJson = {
  zh: zh,
  en: en
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-multi-box {\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item {\n  display: flex;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  align-items: flex-start;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 12px;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field {\n  flex: 1;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field .paraui-v3-helper-text {\n  min-height: 12px;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-separator {\n  padding-bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  margin: 0 12px;\n  line-height: 1;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 12px;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-multi-box > .multi-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-multi-box > .multi-box-add > svg {\n  font-size: 16px;\n  color: rgb(54, 102, 214);\n  margin-right: 8px;\n}\n.paraui-v3-multi-box > .multi-box-add:hover {\n  border-color: rgba(54, 102, 214, 0.4);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-separator > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 0;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-small > .multi-box-add {\n  height: 28px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-medium > .multi-box-add {\n  height: 32px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-large > .multi-box-add {\n  height: 36px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 36px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 36px;\n  height: 36px;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-add {\n  border-color: rgba(171, 176, 185, 0.4);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-add > svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-multi-box.paraui-v3-multi-box-disabled > .multi-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.4);\n}";
styleInject(css_248z);

var MultiBox = function MultiBox(props) {
  var className = props.className,
    style = props.style,
    _props$size = props.size,
    size = _props$size === void 0 ? 'large' : _props$size,
    _props$placeholderKey = props.placeholderKey,
    placeholderKey = _props$placeholderKey === void 0 ? '' : _props$placeholderKey,
    _props$placeholderVal = props.placeholderValue,
    placeholderValue = _props$placeholderVal === void 0 ? '' : _props$placeholderVal,
    _props$label = props.label,
    label = _props$label === void 0 ? '' : _props$label,
    labelTooltip = props.labelTooltip,
    labelSign = props.labelSign,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$required = props.required,
    required = _props$required === void 0 ? false : _props$required,
    _props$error = props.error,
    error = _props$error === void 0 ? false : _props$error,
    hideErrorDom = props.hideErrorDom,
    _props$separator = props.separator,
    separator = _props$separator === void 0 ? ':' : _props$separator,
    _props$helperText = props.helperText,
    helperText = _props$helperText === void 0 ? '' : _props$helperText,
    value = props.value,
    replaceFields = props.replaceFields,
    onChange = props.onChange,
    fetchSuggestionsKey = props.fetchSuggestionsKey,
    fetchSuggestionsValue = props.fetchSuggestionsValue,
    keyOtherProps = props.keyOtherProps,
    valueOtherProps = props.valueOtherProps;
  var isError = helperText && typeof helperText === 'string' ? true : false;
  var isErrorArr = helperText instanceof Array;
  var intl = useFormatMessage('MultiBox', localeJson);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    valueCom = _useState2[0],
    setValueCom = _useState2[1];
  var _useState3 = useState({
      key: 'label',
      value: 'value'
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    replaceFieldsCom = _useState4[0],
    setReplaceFieldsCom = _useState4[1];
  useEffect(function () {
    if (props.defaultValue !== undefined) setValueCom(_toConsumableArray(props.defaultValue));
  }, []);
  useEffect(function () {
    if (value !== undefined) setValueCom(_toConsumableArray(value));
  }, [value]);
  useEffect(function () {
    if (replaceFields) {
      var json = Object.assign(Object.assign({}, replaceFieldsCom), replaceFields);
      setReplaceFieldsCom(json);
    }
  }, [replaceFields]);
  /** 处理错误 */
  var handError = function handError(index, name) {
    var obj = {
      error: false,
      helperText: ''
    };
    if (isErrorArr) {
      var errorItem = helperText[index];
      if (errorItem && errorItem[name]) {
        obj = {
          error: true,
          helperText: errorItem[name]
        };
      }
    }
    return obj;
  };
  /** 增加 */
  var add = function add() {
    if (disabled === true) return;
    valueCom.push({});
    if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
    onChange && onChange(valueCom);
  };
  /** 删除 */
  var del = function del(index) {
    return function () {
      if (disabled === true) return;
      valueCom.splice(index, 1);
      if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
      onChange && onChange(valueCom);
    };
  };
  /** 改变值 */
  var changeValue = function changeValue(key, index) {
    return function (event) {
      valueCom[index][key] = event.target.value;
      if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
      onChange && onChange(valueCom);
    };
  };
  /**
   * 处理label
   * */
  var handLabel = function handLabel() {
    if (!label && !labelSign) return null;
    var handLabelClass = function handLabelClass() {
      var str = 'multi-box-label';
      if (labelTooltip && labelTooltip.className) {
        str += ' ' + labelTooltip.className;
      }
      return str;
    };
    return jsx(Label, Object.assign({
      label: label,
      required: required,
      labelSign: labelSign
    }, labelTooltip, {
      className: handLabelClass()
    }));
  };
  /** 处理内容每一项 */
  var handContentItem = function handContentItem(item, index) {
    var _a, _b;
    var keyValue = item[replaceFieldsCom.key || ''] || '';
    var valValue = item[replaceFieldsCom.value || ''] || '';
    var disabledKey = disabled instanceof Array ? (_a = disabled[index]) === null || _a === void 0 ? void 0 : _a[keyValue] : disabled;
    var disabledVal = disabled instanceof Array ? (_b = disabled[index]) === null || _b === void 0 ? void 0 : _b[valValue] : disabled;
    return jsxs("div", Object.assign({
      className: "multi-box-content-item-input"
    }, {
      children: [jsx(TextField, Object.assign({
        className: 'multi-box-text-field',
        size: size,
        disabled: disabledKey,
        placeholder: placeholderKey,
        value: keyValue
      }, handError(index, replaceFieldsCom.key || ''), {
        onChange: changeValue(replaceFieldsCom.key || '', index),
        fetchSuggestions: fetchSuggestionsKey ? fetchSuggestions('key') : undefined,
        onSelect: selectValue(replaceFieldsCom.key || '', index)
      }, keyOtherProps && keyOtherProps(index, keyValue))), separator && jsx("span", Object.assign({
        className: 'multi-box-separator'
      }, {
        children: separator
      })), jsx(TextField, Object.assign({
        className: 'multi-box-text-field',
        size: size,
        disabled: disabledVal,
        placeholder: placeholderValue,
        value: valValue
      }, handError(index, replaceFieldsCom.value || ''), {
        onChange: changeValue(replaceFieldsCom.value || '', index),
        fetchSuggestions: fetchSuggestionsValue ? fetchSuggestions('value') : undefined,
        onSelect: selectValue(replaceFieldsCom.value || '', index)
      }, valueOtherProps && valueOtherProps(index, valValue)))]
    }));
  };
  /** 处理内容 */
  var handContent = function handContent() {
    return jsx("div", Object.assign({
      className: "multi-box-content"
    }, {
      children: valueCom.map(function (item, index) {
        return jsxs("div", Object.assign({
          className: "multi-box-content-item"
        }, {
          children: [handContentItem(item, index), disabled !== true && jsx("div", Object.assign({
            className: "opera-box"
          }, {
            children: jsx("span", Object.assign({
              className: "del-box",
              onClick: del(index)
            }, {
              children: jsx(Delete, {})
            }))
          }))]
        }), index);
      })
    }));
  };
  /** 模糊匹配 */
  var fetchSuggestions = function fetchSuggestions(key) {
    return function (val, cb) {
      if (key === 'key') fetchSuggestionsKey && fetchSuggestionsKey(val, cb);else fetchSuggestionsValue && fetchSuggestionsValue(val, cb);
    };
  };
  /** 选择值 */
  var selectValue = function selectValue(key, index) {
    return function (item) {
      valueCom[index][key] = item;
      if (_typeof(item) === 'object' && item !== null) {
        valueCom[index][key] = item.value;
      }
      if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
      onChange && onChange(valueCom);
    };
  };
  /** 处理class */
  var handClass = function handClass() {
    var str = $prefixCls + '-multi-box multi-box';
    if (className) str += ' ' + className;
    if (size) str += " ".concat($prefixCls, "-multi-box-").concat(size);
    if (error) str += " ".concat($prefixCls, "-multi-box-error");
    if (disabled === true) str += " ".concat($prefixCls, "-multi-box-disabled");
    if (separator) str += " ".concat($prefixCls, "-multi-box-separator");
    return str;
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style
  }, {
    children: [handLabel(), handContent(), jsxs("div", Object.assign({
      className: "multi-box-add",
      onClick: add
    }, {
      children: [jsx(PlusCircleF, {}), jsx("span", {
        children: intl({
          id: 'add'
        })
      })]
    })), jsx(HelperText, {
      className: "multi-box-error-text",
      error: isError,
      helperText: isError ? helperText : undefined,
      hideErrorDom: hideErrorDom
    })]
  }));
};

export { MultiBox, MultiBox as default };
