const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_tagColor = require("../../../utils/tagColor.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
let classnames = require("classnames");
classnames = require_runtime.__toESM(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 = (0, react.useMemo)(() => (0, _pisell_utils.findOptionsByValues)(value, options), [value, options]);
	const tagDisplayInfo = (0, react.useMemo)(() => (0, _pisell_utils.calculateTagDisplay)(value, options, maxTagCount), [
		value,
		options,
		maxTagCount
	]);
	return /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-multiple-select-wrapper", "pisell-multiple-select-readonly", className),
		style
	}, label && /* @__PURE__ */ react.default.createElement("label", { className: (0, classnames.default)("pisell-multiple-select-label", { "pisell-multiple-select-label-required": required }) }, label), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-multiple-select-readonly-display" }, selectedOptions.length > 0 ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, tagDisplayInfo.visibleTags.map((option, idx) => {
		var _option$color;
		return /* @__PURE__ */ react.default.createElement(antd.Tag, {
			key: option.value,
			className: "pisell-multiple-select-readonly-tag",
			color: (_option$color = option.color) !== null && _option$color !== void 0 ? _option$color : require_tagColor.getDefaultTagColor(option.value, idx)
		}, option.icon && /* @__PURE__ */ react.default.createElement("span", { className: "pisell-multiple-select-readonly-tag-icon" }, option.icon), option.label);
	}), tagDisplayInfo.hiddenCount > 0 && /* @__PURE__ */ react.default.createElement(antd.Tooltip, { title: tagDisplayInfo.hiddenTags.map((t) => t.label).join(", ") }, /* @__PURE__ */ react.default.createElement(antd.Tag, {
		className: "pisell-multiple-select-readonly-more-tag",
		style: {
			backgroundColor: "#F2F4F7",
			borderColor: "#EAECF0",
			color: "#667085"
		}
	}, "+", tagDisplayInfo.hiddenCount))) : /* @__PURE__ */ react.default.createElement("span", { className: "pisell-multiple-select-readonly-empty" }, "-")));
};
ReadOnlyView.displayName = "PisellMultipleSelectReadOnlyView";
//#endregion
exports.default = ReadOnlyView;
