/**
 * PisellMultipleSelect - ReadOnlyView (只读态视图)
 * 只读状态下使用 Tag 展示选中值
 */

import React, { useMemo } from 'react';
import { Tag, Tooltip } from 'antd';
import classNames from 'classnames';
import { findOptionsByValues, calculateTagDisplay } from '@pisell/utils';
import { getDefaultTagColor } from "../../../utils/tagColor";
var ReadOnlyView = function ReadOnlyView(props) {
  var _props$value = props.value,
    value = _props$value === void 0 ? [] : _props$value,
    options = props.options,
    label = props.label,
    required = props.required,
    _props$maxTagCount = props.maxTagCount,
    maxTagCount = _props$maxTagCount === void 0 ? 3 : _props$maxTagCount,
    className = props.className,
    style = props.style;
  var selectedOptions = useMemo(function () {
    return findOptionsByValues(value, options);
  }, [value, options]);
  var tagDisplayInfo = useMemo(function () {
    return calculateTagDisplay(value, options, maxTagCount);
  }, [value, options, maxTagCount]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-multiple-select-wrapper', 'pisell-multiple-select-readonly', className),
    style: style
  }, label && /*#__PURE__*/React.createElement("label", {
    className: classNames('pisell-multiple-select-label', {
      'pisell-multiple-select-label-required': required
    })
  }, label), /*#__PURE__*/React.createElement("div", {
    className: "pisell-multiple-select-readonly-display"
  }, selectedOptions.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, tagDisplayInfo.visibleTags.map(function (option, idx) {
    var _option$color;
    return /*#__PURE__*/React.createElement(Tag, {
      key: option.value,
      className: "pisell-multiple-select-readonly-tag",
      color: (_option$color = option.color) !== null && _option$color !== void 0 ? _option$color : getDefaultTagColor(option.value, idx)
    }, option.icon && /*#__PURE__*/React.createElement("span", {
      className: "pisell-multiple-select-readonly-tag-icon"
    }, option.icon), option.label);
  }), tagDisplayInfo.hiddenCount > 0 && /*#__PURE__*/React.createElement(Tooltip, {
    title: tagDisplayInfo.hiddenTags.map(function (t) {
      return t.label;
    }).join(', ')
  }, /*#__PURE__*/React.createElement(Tag, {
    className: "pisell-multiple-select-readonly-more-tag",
    style: {
      backgroundColor: '#F2F4F7',
      borderColor: '#EAECF0',
      color: '#667085'
    }
  }, "+", tagDisplayInfo.hiddenCount))) : /*#__PURE__*/React.createElement("span", {
    className: "pisell-multiple-select-readonly-empty"
  }, "-")));
};
ReadOnlyView.displayName = 'PisellMultipleSelectReadOnlyView';
export default ReadOnlyView;