import { getDefaultTagColor } from "../../../utils/tagColor.js";
import React, { useMemo } from "react";
import { calculateTagDisplay, findOptionsByValues } from "@pisell/utils";
import { Tag, Tooltip } from "antd";
import classNames from "classnames";
//#region src/components/pisellMultipleSelect/components/ReadOnlyView.tsx
/**
* PisellMultipleSelect - ReadOnlyView (只读态视图)
* 只读状态下使用 Tag 展示选中值
*/
const ReadOnlyView = (props) => {
	const { value = [], options, label, required, maxTagCount = 3, className, style } = props;
	const selectedOptions = useMemo(() => findOptionsByValues(value, options), [value, options]);
	const tagDisplayInfo = useMemo(() => calculateTagDisplay(value, options, maxTagCount), [
		value,
		options,
		maxTagCount
	]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-multiple-select-wrapper", "pisell-multiple-select-readonly", className),
		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((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((t) => 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";
//#endregion
export { ReadOnlyView as default };
