import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
import { useDebouncedSearch } from "@pisell/utils";
import { Input, Select, Tooltip } from "antd";
import { CheckOutlined, SearchOutlined } from "@ant-design/icons";
import classNames from "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 = 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 = _objectWithoutProperties(props, _excluded);
	const antdOptions = useMemo(() => options.map((opt) => ({
		label: opt.label,
		value: opt.value,
		disabled: opt.disabled
	})), [options]);
	const [searchKeyword, setSearchKeyword] = useState("");
	const [, setSearchInput] = useDebouncedSearch("", 300, (text) => {
		onSearch === null || onSearch === void 0 || onSearch(text);
	});
	const handleSearchInput = (e) => {
		const text = e.target.value;
		setSearchKeyword(text);
		setSearchInput(text);
	};
	const filteredAntdOptions = 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 = useRef(null);
	const menuItemSelectedIcon = /* @__PURE__ */ React.createElement(CheckOutlined, { style: {
		color: "#7F56D9",
		fontSize: 16
	} });
	const dropdownRender = useCallback((menu) => {
		if (!showSearch) return menu;
		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "pisell-select-search-wrapper" }, /* @__PURE__ */ React.createElement(Input, {
			placeholder: "Search",
			prefix: /* @__PURE__ */ React.createElement(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 = useCallback((omittedValues) => {
		if (!showTooltipOnOverflow) return /* @__PURE__ */ React.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.createElement(Tooltip, { title: tooltipContent }, /* @__PURE__ */ React.createElement("span", { className: "pisell-multiple-select-more-tag" }, "+", omittedValues.length));
	}, [options, showTooltipOnOverflow]);
	return /* @__PURE__ */ React.createElement("div", {
		ref: wrapperRef,
		className: classNames("pisell-multiple-select-wrapper", className),
		style
	}, label && /* @__PURE__ */ React.createElement("label", { className: classNames("pisell-multiple-select-label", { "pisell-multiple-select-label-required": required }) }, label), /* @__PURE__ */ React.createElement(Select, _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: classNames("pisell-multiple-select", { "pisell-multiple-select-error": error })
	})), helperText && !error && /* @__PURE__ */ React.createElement("div", { className: "pisell-multiple-select-helper-text" }, helperText), error && errorText && /* @__PURE__ */ React.createElement("div", { className: "pisell-multiple-select-error-text" }, errorText));
});
EditView.displayName = "PisellMultipleSelectEditView";
//#endregion
export { EditView as default };
