const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_objectWithoutProperties = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
let _ant_design_icons = require("@ant-design/icons");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
//#region src/components/pisellMultipleSelect/components/EditView.tsx
/**
* PisellMultipleSelect - EditView (编辑态视图)
* 正常可编辑状态下的渲染
*/
const _excluded = [
	"value",
	"options",
	"label",
	"helperText",
	"error",
	"errorText",
	"required",
	"placeholder",
	"showSearch",
	"allowClear",
	"maxTagCount",
	"showTooltipOnOverflow",
	"size",
	"className",
	"style",
	"onSearch",
	"filterOption",
	"onChangeInternal"
];
const EditView = (0, react.forwardRef)((props, ref) => {
	const { value = [], options, label, helperText, error, errorText, required, placeholder = "请选择", showSearch = false, allowClear = false, maxTagCount = 3, showTooltipOnOverflow = true, size = "middle", className, style, onSearch, filterOption, onChangeInternal } = props, restProps = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	const antdOptions = (0, react.useMemo)(() => options.map((opt) => ({
		label: opt.label,
		value: opt.value,
		disabled: opt.disabled
	})), [options]);
	const [searchKeyword, setSearchKeyword] = (0, react.useState)("");
	const [, setSearchInput] = (0, _pisell_utils.useDebouncedSearch)("", 300, (text) => {
		onSearch === null || onSearch === void 0 || onSearch(text);
	});
	const handleSearchInput = (e) => {
		const text = e.target.value;
		setSearchKeyword(text);
		setSearchInput(text);
	};
	const filteredAntdOptions = (0, react.useMemo)(() => {
		if (!showSearch || !searchKeyword) return antdOptions;
		if (filterOption) return antdOptions.filter((opt) => {
			const selectOption = options.find((o) => o.value === opt.value);
			return selectOption ? filterOption(searchKeyword, selectOption) : false;
		});
		return antdOptions.filter((opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase()));
	}, [
		antdOptions,
		searchKeyword,
		showSearch,
		filterOption,
		options
	]);
	const wrapperRef = (0, react.useRef)(null);
	const menuItemSelectedIcon = /* @__PURE__ */ react.default.createElement(_ant_design_icons.CheckOutlined, { style: {
		color: "#7F56D9",
		fontSize: 16
	} });
	const dropdownRender = (0, react.useCallback)((menu) => {
		if (!showSearch) return menu;
		return /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-select-search-wrapper" }, /* @__PURE__ */ react.default.createElement(antd.Input, {
			placeholder: "Search",
			prefix: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SearchOutlined, { style: {
				color: "#98A2B3",
				fontSize: 16
			} }),
			value: searchKeyword,
			onChange: handleSearchInput,
			className: "pisell-select-search-input",
			bordered: false,
			autoFocus: true
		})), menu);
	}, [
		showSearch,
		searchKeyword,
		handleSearchInput
	]);
	const maxTagPlaceholder = (0, react.useCallback)((omittedValues) => {
		if (!showTooltipOnOverflow) return /* @__PURE__ */ react.default.createElement("span", { className: "pisell-multiple-select-more-tag" }, "+", omittedValues.length);
		const tooltipContent = omittedValues.map((v) => {
			var _options$find;
			return (_options$find = options.find((opt) => opt.value === v.value)) === null || _options$find === void 0 ? void 0 : _options$find.label;
		}).filter(Boolean).join(", ");
		return /* @__PURE__ */ react.default.createElement(antd.Tooltip, { title: tooltipContent }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-multiple-select-more-tag" }, "+", omittedValues.length));
	}, [options, showTooltipOnOverflow]);
	return /* @__PURE__ */ react.default.createElement("div", {
		ref: wrapperRef,
		className: (0, classnames.default)("pisell-multiple-select-wrapper", 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(antd.Select, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, restProps), {}, {
		ref,
		open: true,
		mode: "multiple",
		value,
		options: filteredAntdOptions,
		placeholder,
		showSearch: false,
		allowClear,
		menuItemSelectedIcon,
		dropdownRender,
		onChange: onChangeInternal,
		maxTagCount,
		maxTagPlaceholder,
		size,
		popupClassName: "pisell-multiple-select-dropdown",
		getPopupContainer: () => {
			var _wrapperRef$current;
			return (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 ? _wrapperRef$current : document.body;
		},
		className: (0, classnames.default)("pisell-multiple-select", { "pisell-multiple-select-error": error })
	})), helperText && !error && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-multiple-select-helper-text" }, helperText), error && errorText && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-multiple-select-error-text" }, errorText));
});
EditView.displayName = "PisellMultipleSelectEditView";
//#endregion
exports.default = EditView;
