import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
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 { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useRef, useEffect, useMemo } from 'react';
import { TextField } from '../TextField/index.js';
import HelperText from '../HelperText/index.js';
import { MultiBox } from '../MultiBox/index.js';
import AutoTips from '../AutoTips/index.js';
import { Popover } from '../Popover/index.js';
import Application from '@iam-com/icons/Application';
import { GetLanguage, ArrayToObject } from '@iam-com/lib';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Label/index.js';
import '../Help/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '@iam-com/icons/Help';
import '@iam-com/icons/PreviewClose';
import '@iam-com/icons/PreviewOpen';
import '@iam-com/icons/CloseCircle';
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 '@iam-com/icons/Delete';
import '@iam-com/icons/PlusCircleF';
import '../_verture/useFormatMessage-703f8b20.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-input-lang {\n  display: inline-block;\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-input-lang .input-lang-text-field > .text-field-content > .text-field-content-before .lang-key {\n  max-width: 100px;\n}\n.paraui-v3-input-lang .input-lang-text-field > .text-field-content > .text-field-content-after {\n  cursor: pointer;\n}\n.paraui-v3-input-lang .input-lang-text-field > .text-field-content > .text-field-content-after .lang-list-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v3-input-lang .input-lang-text-field > .paraui-v3-helper-text {\n  display: none;\n}\n\n.paraui-v3-input-lang-popover > .component-popover-content > .component-popover-inner {\n  padding: 12px;\n  width: 300px;\n  line-height: 0;\n}\n.paraui-v3-input-lang-popover > .component-popover-content > .component-popover-inner .input-lang-multi-box {\n  padding-bottom: 0;\n}\n.paraui-v3-input-lang-popover.paraui-v3-input-lang-popover-disabled-add > .component-popover-content > .component-popover-inner .input-lang-multi-box .multi-box-add {\n  display: none;\n}\n.paraui-v3-input-lang-popover.paraui-v3-input-lang-popover-disabled-delete > .component-popover-content > .component-popover-inner .input-lang-multi-box .multi-box-content > .multi-box-content-item .opera-box {\n  display: none;\n}";
styleInject(css_248z);

var InputLang = function InputLang(props) {
  var _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    style = props.style,
    _props$label = props.label,
    label = _props$label === void 0 ? '' : _props$label,
    labelTooltip = props.labelTooltip,
    _props$size = props.size,
    size = _props$size === void 0 ? 'large' : _props$size,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
    _props$placeholderKey = props.placeholderKey,
    placeholderKey = _props$placeholderKey === void 0 ? '' : _props$placeholderKey,
    _props$placeholderVal = props.placeholderValue,
    placeholderValue = _props$placeholderVal === void 0 ? '' : _props$placeholderVal,
    _props$error = props.error,
    error = _props$error === void 0 ? false : _props$error,
    hideErrorDom = props.hideErrorDom,
    _props$helperText = props.helperText,
    helperText = _props$helperText === void 0 ? '' : _props$helperText,
    _props$required = props.required,
    required = _props$required === void 0 ? false : _props$required,
    popoverClassName = props.popoverClassName,
    value = props.value,
    onChange = props.onChange,
    _props$langList = props.langList,
    langList = _props$langList === void 0 ? ['zh', 'en'] : _props$langList,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    defaultLang = props.defaultLang,
    disabledDelete = props.disabledDelete,
    disabledAdd = props.disabledAdd,
    disabledKey = props.disabledKey;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1]; // 打开弹窗
  var _useState3 = useState(GetLanguage() || 'zh'),
    _useState4 = _slicedToArray(_useState3, 2),
    lang = _useState4[0],
    setLang = _useState4[1]; // 当前语言
  var _useState5 = useState({}),
    _useState6 = _slicedToArray(_useState5, 2),
    langMapping = _useState6[0],
    setLangMapping = _useState6[1];
  var _useState7 = useState({}),
    _useState8 = _slicedToArray(_useState7, 2),
    valueCom = _useState8[0],
    setValueCom = _useState8[1];
  var _useState9 = useState([]),
    _useState10 = _slicedToArray(_useState9, 2),
    valueListLang = _useState10[0],
    setValueListLang = _useState10[1]; // 多值框值
  var constData = useRef({
    lang: lang,
    valueCom: valueCom,
    langMapping: {},
    langLabelMapping: {}
  });
  constData.current.lang = lang;
  constData.current.disabledDelete = disabledDelete;
  useEffect(function () {
    if (props.defaultValue !== undefined) {
      handValue(props.defaultValue);
    }
  }, []);
  useEffect(function () {
    if (value !== undefined) {
      handValue(value);
    }
  }, [value]);
  useEffect(function () {
    if (defaultLang !== undefined) {
      setLang(defaultLang);
      constData.current.lang = defaultLang;
      handValue();
    }
  }, [defaultLang]);
  useEffect(function () {
    if (langList) {
      var obj = {};
      var objLabel = {};
      for (var i = 0, l = langList.length; i < l; i++) {
        var item = langList[i];
        if (typeof item === "string") {
          obj[item] = {
            label: item,
            value: item
          };
          objLabel[item] = {
            label: item,
            value: item
          };
        } else {
          obj[item.value] = item;
          objLabel[item.label] = item;
        }
      }
      constData.current.langMapping = obj;
      constData.current.langLabelMapping = objLabel;
      setLangMapping(obj);
      handValue();
    }
  }, [props.langList]);
  /**
   * 处理值
   */
  var handValue = function handValue(val) {
    var valueCopy = Object.assign({}, val || constData.current.valueCom);
    var arr = [];
    var json = {};
    if (constData.current.disabledDelete) {
      var keyArr = Object.keys(constData.current.langMapping) || [];
      for (var i = 0, l = keyArr.length; i < l; i++) {
        var keyItem = constData.current.langMapping[keyArr[i]] || {};
        var key = keyItem.value;
        var _label = keyItem.label;
        var _val = valueCopy[key];
        if (key !== constData.current.lang) {
          json[key] = true;
          arr.push({
            label: _label,
            value: _val || ''
          });
        }
      }
    }
    var valueCopyArr = Object.keys(valueCopy);
    for (var _i = 0, _l = valueCopyArr.length; _i < _l; _i++) {
      var _key = valueCopyArr[_i];
      var item = valueCopy[_key];
      // 不存在设置过，且不是当前语言
      if (!json[_key] && _key !== constData.current.lang) {
        var itemDetail = constData.current.langMapping[_key] || {};
        arr.push({
          label: itemDetail.label || _key,
          value: item || ''
        });
      }
    }
    constData.current.valueCom = Object.assign({}, valueCopy);
    setValueListLang(arr);
    setValueCom(valueCopy);
  };
  /**
   * 向外抛值
   * */
  var outValue = function outValue(val) {
    if (props.value === undefined) {
      constData.current.valueCom = Object.assign({}, val);
      setValueCom(val);
    }
    onChange && onChange(val);
  };
  /**
   * 改变当前语言
   * @param event
   */
  var changeValue = function changeValue(event) {
    valueCom[lang] = event.target.value;
    var val = Object.assign({}, valueCom);
    outValue(val);
  };
  /**
   * 改变弹窗语言值
   * @param val
   */
  var changeListLang = function changeListLang(val) {
    setValueListLang(_toConsumableArray(val));
  };
  /** 模糊搜索 */
  var fetchSuggestionsKey = function fetchSuggestionsKey(val, cb) {
    var _a;
    var arr = [];
    var jsonMapping = ArrayToObject('label', valueListLang);
    for (var i = 0, l = langList.length; i < l; i++) {
      var item = langList[i];
      if (_typeof(item) === "object") {
        item = item.label;
      }
      if (!jsonMapping[item] && item !== (((_a = langMapping[lang]) === null || _a === void 0 ? void 0 : _a.label) || lang)) arr.push({
        label: item,
        value: item
      });
    }
    cb(arr);
  };
  /** 点击国际化图标 */
  var clickAfter = function clickAfter() {
    setOpen(true);
  };
  /** 关闭弹窗 */
  var handleClose = function handleClose(bol) {
    var _a;
    if (bol) return;
    setOpen(false);
    // 向外抛值
    var json = {};
    json[lang] = valueCom[lang] || '';
    for (var i = 0, l = valueListLang.length; i < l; i++) {
      var item = valueListLang[i];
      var _label2 = ((_a = constData.current.langLabelMapping[item.label]) === null || _a === void 0 ? void 0 : _a.value) || item.label || '';
      if (_label2.trim() !== '') json[_label2] = item.value || '';
    }
    outValue(json);
  };
  /** 当前语言 */
  var AddonBeforeMemo = function AddonBeforeMemo() {
    var _a;
    return jsx("div", Object.assign({
      className: 'lang-key'
    }, {
      children: jsx(AutoTips, Object.assign({
        tipMaxWidth: '300px'
      }, {
        children: ((_a = langMapping[lang]) === null || _a === void 0 ? void 0 : _a.label) || lang
      }))
    }));
  };
  /** 加载更多语言 */
  var AddonAfterMemo = useMemo(function () {
    return jsx("div", Object.assign({
      className: "lang-list-icon"
    }, {
      children: jsx(Application, {})
    }));
  }, []);
  /** 处理弹出框className */
  var popoverHandClass = function popoverHandClass() {
    var str = $prefixCls + '-input-lang-popover';
    if (popoverClassName) str += ' ' + popoverClassName;
    if (disabledAdd) str += " ".concat($prefixCls, "-input-lang-popover-disabled-add");
    if (disabledDelete) str += " ".concat($prefixCls, "-input-lang-popover-disabled-delete");
    return str;
  };
  var handleDisabled = function handleDisabled() {
    if (disabled === true) return;
    var arr = [];
    if (disabledKey) {
      var bol = _typeof(disabledKey) === 'object';
      for (var i = 0, l = valueListLang.length; i < l; i++) {
        var _label3 = valueListLang[i].label || '';
        var labelDetail = constData.current.langLabelMapping[_label3] || {};
        if (bol) {
          arr.push(_defineProperty({}, _label3, disabledKey.indexOf(labelDetail.value || _label3) !== -1));
        } else {
          if (_label3.trim() !== '') {
            arr.push(_defineProperty({}, _label3, true));
          }
        }
      }
    }
    return arr;
  };
  /** 弹窗列表内容 */
  var langListPopoverContent = function langListPopoverContent() {
    return jsx("div", Object.assign({
      className: "input-lang-list"
    }, {
      children: jsx(MultiBox, {
        className: 'input-lang-multi-box',
        size: size,
        disabled: handleDisabled(),
        value: valueListLang,
        onChange: changeListLang,
        fetchSuggestionsKey: fetchSuggestionsKey,
        placeholderKey: placeholderKey,
        placeholderValue: placeholderValue
      })
    }));
  };
  /**
   * 处理class
   * @return {string}
   */
  var handClass = function handClass() {
    var str = $prefixCls + '-input-lang';
    if (size) str += " ".concat($prefixCls, "-input-lang-").concat(size);
    if (error) str += " ".concat($prefixCls, "-input-lang-error");
    if (className) str += ' ' + className;
    return str;
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style
  }, {
    children: [jsx(Popover, Object.assign({
      placement: "bottom-end",
      visible: open,
      content: langListPopoverContent(),
      onVisibleChange: handleClose,
      overlayClassName: popoverHandClass()
    }, {
      children: jsx(TextField, {
        className: 'input-lang-text-field',
        size: size,
        error: error,
        disabled: disabled,
        required: required,
        label: label,
        labelTooltip: labelTooltip,
        placeholder: placeholder,
        value: valueCom[lang] || '',
        addonAfter: AddonAfterMemo,
        addonBefore: AddonBeforeMemo(),
        hideErrorDom: true,
        onClickAddonAfter: clickAfter,
        onChange: changeValue
      })
    })), jsx(HelperText, {
      className: "input-lang-error-text",
      error: error,
      helperText: helperText,
      hideErrorDom: hideErrorDom
    })]
  }));
};

export { InputLang, InputLang as default };
