import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import CloseIcon from '@iam-com/icons/Close';
import clsx from 'clsx';
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import AutoTips from '../AutoTips/index.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import Plus from '@iam-com/icons/Plus';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import '@iam-com/lib';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/1/12 上午9:43\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-tag {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-width: 100%;\n  height: 24px;\n  margin: 0 8px 8px 0;\n  padding: 0 12px;\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n  white-space: nowrap;\n  background: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  /*&.paraui-v3-tag-small {\n    line-height: 24px;\n\n    &.paraui-v3-tag-bordered {\n      line-height: 22px;\n    }\n  }*/\n}\n.paraui-v3-tag.paraui-v3-tag-bordered {\n  border: 1px solid rgba(171, 176, 185, 0.2);\n  line-height: 22px;\n}\n.paraui-v3-tag.paraui-v3-tag-large {\n  line-height: 28px;\n}\n.paraui-v3-tag.paraui-v3-tag-large.paraui-v3-tag-bordered {\n  line-height: 26px;\n}\n.paraui-v3-tag > svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-tag .tag-close-icon {\n  margin-left: 4px;\n  color: inherit;\n  font-size: 16px;\n  cursor: pointer;\n}\n.paraui-v3-tag .tag-close-icon:hover {\n  color: inherit;\n}\n.paraui-v3-tag > svg + .paraui-v3-auto-tips {\n  margin-left: 4px;\n}\n.paraui-v3-tag.paraui-v3-tag-has-color, .paraui-v3-tag.paraui-v3-tag-has-color svg, .paraui-v3-tag.paraui-v3-tag-has-color svg:hover {\n  color: inherit;\n}\n.paraui-v3-tag.paraui-v3-tag-blue {\n  color: rgb(54, 102, 214);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-green {\n  color: rgb(83, 195, 27);\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-yellow {\n  color: rgb(255, 161, 80);\n  background-color: rgba(255, 161, 80, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-red {\n  color: rgb(235, 96, 84);\n  background-color: rgba(235, 96, 84, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-hidden {\n  display: none;\n}\n\n.paraui-v3-tag-group {\n  display: flex;\n  align-items: center;\n  flex-flow: row wrap;\n}\n.paraui-v3-tag-group .tag-group-input {\n  width: 78px;\n  height: 24px;\n  align-self: flex-start;\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n  text-indent: 8px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-v3-tag-group .tag-group-input .tag-group-input-large {\n  height: 28px;\n}\n.paraui-v3-tag-group .tag-group-new .tag-group-new-icon {\n  padding: 0 5px;\n}";
styleInject(css_248z);

//tag group
var TagGroup = function TagGroup(props) {
  var className = props.className,
    _props$size = props.size,
    size = _props$size === void 0 ? 'small' : _props$size,
    style = props.style,
    _props$bordered = props.bordered,
    bordered = _props$bordered === void 0 ? false : _props$bordered,
    defaultInputValue = props.defaultInputValue,
    _props$increased = props.increased,
    increased = _props$increased === void 0 ? false : _props$increased,
    increasedTag = props.increasedTag,
    onChange = props.onChange;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    inData = _useState2[0],
    setInData = _useState2[1]; //数据源
  var _useState3 = useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : ''),
    _useState4 = _slicedToArray(_useState3, 2),
    inputValue = _useState4[0],
    setInputValue = _useState4[1]; //input value
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    inputVisible = _useState6[0],
    setInputVisible = _useState6[1]; //input visible
  var inputRef = useRef(); //input ref
  useEffect(function () {
    if (props.data) {
      var tArr = props.data;
      //Item[]
      var unObjType = tArr.some(function (v) {
        return ['string', 'number'].includes(_typeof(v));
      });
      if (unObjType) {
        tArr = tArr.map(function (_) {
          return {
            value: _,
            label: _
          };
        });
      }
      setInData(_toConsumableArray(tArr));
    }
  }, [props.data]);
  //tag value
  var getTagGroupVal = function getTagGroupVal(data) {
    return data.map(function (_) {
      return _.value;
    });
  };
  //show input
  var showInput = function showInput() {
    setInputVisible(true);
    setTimeout(function () {
      var _a;
      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    });
  };
  //input change
  var handleInputChange = function handleInputChange(e) {
    setInputValue(e.target.value);
  };
  //input confirm
  var handleInputConfirm = function handleInputConfirm() {
    var val = inputValue.trim();
    if (val !== '') {
      inData.push({
        value: val,
        label: val,
        closable: true
      });
      setInData(_toConsumableArray(inData));
      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
    }
    setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : '');
    setInputVisible(false);
  };
  //input enter
  var handleInputEnter = function handleInputEnter(e) {
    if (e.keyCode === 13 || e.which === 13) {
      handleInputConfirm();
    }
  };
  //handle close
  var handleClose = function handleClose(item) {
    return function (e) {
      var idx = inData.findIndex(function (_) {
        return _.value === item.value;
      });
      if (idx > -1) {
        inData.splice(idx, 1);
        setInData(_toConsumableArray(inData));
      }
      if (item.onClose) item.onClose(e);
      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
    };
  };
  //渲染Tag组
  var renderTagGroup = function renderTagGroup() {
    if (!(inData === null || inData === void 0 ? void 0 : inData.length)) return null;
    return inData.map(function (item, idx) {
      return jsx(Tag, Object.assign({}, item, {
        size: size,
        bordered: bordered,
        visible: true,
        onClose: handleClose(item)
      }, {
        children: item.label
      }), idx);
    });
  };
  //动态增加tag
  var renderNewInput = function renderNewInput() {
    var _a;
    if (inputVisible) {
      var inputCls = clsx('tag-group-input', {
        'tag-group-input-large': size === 'large'
      });
      return jsx("input", {
        type: "text",
        ref: inputRef,
        className: inputCls,
        value: inputValue,
        onChange: handleInputChange,
        onBlur: handleInputConfirm,
        onKeyDown: handleInputEnter
      });
    }
    var icon = jsx(Plus, {});
    var text = 'New Tag';
    if (increasedTag) {
      icon = increasedTag.icon || jsx(Plus, {});
      text = (_a = increasedTag.text) !== null && _a !== void 0 ? _a : 'New Tag';
    }
    var newCls = clsx('tag-group-new', {
      'tag-group-new-icon': !text
    });
    return jsx(Tag, Object.assign({
      className: newCls,
      size: size,
      bordered: bordered,
      icon: icon,
      onClick: showInput
    }, {
      children: text
    }));
  };
  return jsxs("div", Object.assign({
    className: clsx("".concat($prefixCls, "-tag-group"), className),
    style: style
  }, {
    children: [renderTagGroup(), increased && renderNewInput()]
  }));
};

//预设颜色列表
var PresetColors = ['blue', 'green', 'yellow', 'red'];
//tag
var InternalTag = function InternalTag(props) {
  var _clsx;
  var className = props.className,
    children = props.children,
    icon = props.icon,
    color = props.color,
    onClose = props.onClose,
    closeIcon = props.closeIcon,
    _props$closable = props.closable,
    closable = _props$closable === void 0 ? false : _props$closable,
    _props$bordered = props.bordered,
    bordered = _props$bordered === void 0 ? false : _props$bordered,
    _props$size = props.size,
    size = _props$size === void 0 ? 'small' : _props$size,
    style = props.style,
    visibleTag = props.visible,
    tipMaxWidth = props.tipMaxWidth,
    restProps = __rest(props, ["className", "children", "icon", "color", "onClose", "closeIcon", "closable", "bordered", "size", "style", "visible", "tipMaxWidth"]);
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1]; //显示tag
  useEffect(function () {
    if ('visible' in props) {
      setVisible(!!visibleTag);
    }
  }, [visibleTag]);
  //是否预设颜色
  var isPresetColor = function isPresetColor() {
    if (!color) return false;
    return PresetColors.includes(color);
  };
  //tag style
  var tagStyle = Object.assign({
    color: color && !isPresetColor() ? color : undefined
  }, style);
  //tag cls
  var tagClassName = clsx("".concat($prefixCls, "-tag"), className, (_clsx = {}, _defineProperty(_clsx, "".concat($prefixCls, "-tag-has-color"), color), _defineProperty(_clsx, "".concat($prefixCls, "-tag-hidden"), !visible), _defineProperty(_clsx, "".concat($prefixCls, "-tag-bordered"), bordered), _defineProperty(_clsx, "".concat($prefixCls, "-tag-large"), size === 'large'), _defineProperty(_clsx, "".concat($prefixCls, "-tag-").concat(color), isPresetColor()), _clsx));
  //tag close click
  var handleCloseClick = function handleCloseClick(e) {
    e.stopPropagation();
    onClose === null || onClose === void 0 ? void 0 : onClose(e);
    if (e.defaultPrevented) {
      return;
    }
    if (!('visible' in props)) {
      setVisible(false);
    }
  };
  //渲染close icon
  var renderCloseIcon = function renderCloseIcon() {
    if (!closable) return null;
    return closeIcon ? jsx("span", Object.assign({
      className: 'tag-close-icon',
      onClick: handleCloseClick
    }, {
      children: closeIcon
    })) : jsx(CloseIcon, {
      className: 'tag-close-icon',
      onClick: handleCloseClick
    });
  };
  return jsxs("span", Object.assign({}, restProps, {
    className: tagClassName,
    style: tagStyle
  }, {
    children: [icon ? jsxs(Fragment, {
      children: [icon, children && jsx(AutoTips, Object.assign({
        tipMaxWidth: tipMaxWidth
      }, {
        children: jsx("span", {
          children: children
        })
      }))]
    }) : children ? jsx(AutoTips, Object.assign({
      tipMaxWidth: tipMaxWidth
    }, {
      children: children
    })) : null, renderCloseIcon()]
  }));
};
var Tag = InternalTag;

export { Tag, TagGroup, Tag as default };
