import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../hooks/useEngineContext.js";
import HolderItem from "./components/HolderItem/index.js";
import HolderList from "./components/HolderList/index.js";
import ErrorTip from "./components/ErrorTip/index.js";
import locales_default from "./locales.js";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { isMobile, locales } from "@pisell/utils";
import { Button, PisellModal } from "@pisell/materials";
import "./index.less";
//#region src/plus/selectHolder/index.tsx
const PREFIX = "pisell-lowcode-select-holder";
const PisellSelectHolder = ({ dataSource, open = true, onClose, onConfirm, onSkip, onAdd, value, modalConfig, displayConfig, allowAdd = true, horizontalGap = 16, verticalGap = 16, maxSelectedCount = 2, isInline = false, className, style }) => {
	var _context$engine;
	const [errorTip, setErrorTip] = useState("");
	const [selectedValues, setSelectedValues] = useState([]);
	const mobile = useMemo(() => isMobile(), []);
	const context = useEngineContext();
	locales.init(locales_default, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en");
	useEffect(() => {
		let _value = [];
		if (Array.isArray(value)) _value = value;
		else _value = value ? [value] : [];
		setSelectedValues(_value);
	}, [value]);
	/**
	* @title: 单选模式默认选中第一个有效选项
	* @description: 当单选模式且没有选中值时，自动选中第一个带value的选项
	* @Author: Auto
	* @Date: 2025-01-XX
	*/
	useEffect(() => {
		if ((displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.selectType) !== "single") return;
		if (selectedValues.length > 0) return;
		if (value !== void 0 && value !== null && (value === null || value === void 0 ? void 0 : value.length) > 0) return;
		if (Array.isArray(dataSource) && dataSource.length > 0) {
			const firstValidOption = dataSource.find((item) => (item === null || item === void 0 ? void 0 : item.value) !== null && (item === null || item === void 0 ? void 0 : item.value) !== void 0);
			if (firstValidOption) handleClick(firstValidOption);
		}
	}, [
		dataSource,
		displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.selectType,
		selectedValues.length,
		value
	]);
	/**
	* @title: 处理确认按钮点击
	* @description:
	* @param {*} useCallback
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-10-10 21:32
	*/
	const handleOk = useCallback(() => {
		onConfirm === null || onConfirm === void 0 || onConfirm(selectedValues);
	}, [selectedValues]);
	/**
	* @title: 处理选项点击
	* @description:
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-10-10 21:28
	*/
	const handleClick = useCallback((item) => {
		if (!(item === null || item === void 0 ? void 0 : item.value)) return onAdd === null || onAdd === void 0 ? void 0 : onAdd();
		if (((displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.selectType) || "single") === "single") setSelectedValues((prev) => {
			return prev.includes(item.value) ? [] : [item.value];
		});
		else setSelectedValues((prev) => {
			return prev.includes(item.value) ? prev.filter((v) => v !== item.value) : [...prev, item.value];
		});
	}, [displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.selectType]);
	const handleSkip = useCallback(() => {
		onSkip === null || onSkip === void 0 || onSkip();
	}, [onSkip]);
	/**
	* @title: 渲染添加项
	* @description:
	* @param {*} useCallback
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-10-11 14:20
	*/
	const addHolderLabel = locales.getText("pisell-select-holder-create");
	const renderAddItem = useCallback(() => {
		if (!allowAdd) return void 0;
		return /* @__PURE__ */ React.createElement(HolderItem, {
			item: {
				label: addHolderLabel,
				value: null
			},
			isAddItem: true
		});
	}, [allowAdd]);
	/**
	* @title: 模态框样式类名
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-10-11 14:20
	*/
	const modalClassName = useMemo(() => {
		const classes = [`${PREFIX}-modal`];
		if (mobile) classes.push(`${PREFIX}-modal-mobile`);
		return classes.join(" ");
	}, [mobile]);
	const okButtonProps = useMemo(() => {
		if ((displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.selectType) === "multiple") return { disabled: (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > maxSelectedCount };
		return { disabled: !(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) };
	}, [
		selectedValues,
		maxSelectedCount,
		displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.selectType
	]);
	/**
	* @title: 渲染底部按钮
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-10-10 21:51
	*/
	const footerCom = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-footer` }, (displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.isSkipable) ? /* @__PURE__ */ React.createElement(Button, { onClick: handleSkip }, locales.getText("pisell-select-holder-skip")) : null, /* @__PURE__ */ React.createElement(Button, _objectSpread2(_objectSpread2({ onClick: handleOk }, okButtonProps), {}, { type: "primary" }), modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.confirmText));
	}, [
		displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.isSkipable,
		modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.confirmText,
		okButtonProps
	]);
	/**
	* @description: 渲染内容
	* @param {*} useMemo
	* @return {*}
	*/
	const renderContent = useMemo(() => {
		return /* @__PURE__ */ React.createElement(React.Fragment, null, mobile && (modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.title) ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-modal-title` }, modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.title) : null, errorTip && /* @__PURE__ */ React.createElement(ErrorTip, { text: errorTip }), (displayConfig === null || displayConfig === void 0 ? void 0 : displayConfig.selectType) === "multiple" && maxSelectedCount ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-selected-info ${selectedValues.length === maxSelectedCount ? `${PREFIX}-selected-info-max` : ""}` }, locales.getText("pisell-select-holder-selected"), selectedValues.length, "/", maxSelectedCount, selectedValues.length > maxSelectedCount ? /* @__PURE__ */ React.createElement("span", null, " ", locales.getText("pisell-select-holder-please-remove")(selectedValues.length - maxSelectedCount)) : null) : null, /* @__PURE__ */ React.createElement(HolderList, {
			dataSource,
			selectedValues,
			displayConfig,
			renderAddItem,
			columns: mobile ? 2 : 3,
			horizontalGap,
			verticalGap,
			allowAdd,
			onClick: handleClick
		}));
	}, [
		isInline,
		modalConfig,
		dataSource,
		errorTip,
		maxSelectedCount,
		selectedValues,
		displayConfig,
		renderAddItem,
		mobile,
		horizontalGap,
		verticalGap,
		allowAdd,
		handleClick
	]);
	if (isInline) return /* @__PURE__ */ React.createElement("div", {
		className: `${PREFIX}-inline-wrap ${className}`,
		style
	}, renderContent);
	return /* @__PURE__ */ React.createElement(PisellModal, {
		open,
		title: mobile ? "" : modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.title,
		platform: mobile ? "h5" : "pc",
		closable: modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.showClose,
		bodyStyle: { padding: mobile ? "0 16px 16px" : 20 },
		mobileModalHeight: "auto",
		destroyOnClose: true,
		className: modalClassName,
		headerDivider: false,
		width: mobile ? "100%" : "640px",
		footer: footerCom,
		onCancel: onClose
	}, renderContent);
};
//#endregion
export { PisellSelectHolder as default };
