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");
const require_useEngineContext = require("../../hooks/useEngineContext.js");
const require_IntersectionObserver = require("./components/IntersectionObserver.js");
const require_CategorySkeleton = require("./CategoryTabs/CategorySkeleton.js");
const require_gridComponents = require("./ProductList/gridComponents.js");
const require_index = require("./ProductList/index.js");
const require_useToken = require("./hooks/useToken.js");
const require_utils = require("./utils.js");
const require_locales = require("./locales.js");
const require_ProductCardSkeleton = require("./ProductCard/ProductCardSkeleton.js");
const require_index$1 = require("./ProductCard/index.js");
const require_index$2 = require("./CategoryTabs/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
let _pisell_icon_es_SearchLg = require("@pisell/icon/es/SearchLg");
_pisell_icon_es_SearchLg = require_runtime.__toESM(_pisell_icon_es_SearchLg);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./index.less");
//#region src/plus/productSelect/index.tsx
const _excluded = [
	"dataSource",
	"emptyDescription",
	"showSearch",
	"scrollDom",
	"offsetDom",
	"style",
	"token",
	"onChange",
	"value",
	"selectedItems",
	"productListSetting",
	"customScrollParent",
	"loading",
	"layout",
	"hideCategoryWhenOne",
	"tabSwitchMode",
	"scenario",
	"compact"
];
const MOCK_DATA = (() => {
	const mockData = [];
	mockData.push({
		__typename: "category",
		id: "_c1_1"
	});
	for (let productIndex = 0; productIndex < 4; productIndex++) mockData.push({
		__typename: "product",
		id: "_pi" + productIndex
	});
	return mockData;
})();
const PREFIX = "pisell-product-select";
const CONTAINER_CLASS = `${PREFIX}-wrapper`;
const index = (_ref) => {
	var _context$appHelper$ut;
	let { dataSource = [], emptyDescription, showSearch = true, scrollDom, offsetDom, style = {}, token: customToken, onChange, value, selectedItems, productListSetting = {}, customScrollParent, loading = false, layout, hideCategoryWhenOne = false, tabSwitchMode = "anchor", scenario = "default", compact = false } = _ref;
	require_objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
	const context = require_useEngineContext.default();
	_pisell_utils.locales.init(require_locales.default, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get("umi_locale")) || "en");
	const searchRef = (0, react.useRef)(null);
	const [keyword, setKeyword] = (0, react.useState)("");
	const [activeKey, setActiveKey] = (0, react.useState)(["0"]);
	const [scrollParent, setScrollParent] = (0, react.useState)(null);
	const isIndicatorVisibleRef = (0, react.useRef)(false);
	const containerRef = (0, react.useRef)(null);
	const _customScrollParent = customScrollParent || scrollDom;
	const gridComponents = (0, react.useMemo)(() => {
		return require_gridComponents.createGridComponents(layout, {
			tabSwitchMode,
			gap: compact ? 6 : 12
		});
	}, [
		layout,
		tabSwitchMode,
		compact
	]);
	const _filteredList = (0, react.useMemo)(() => {
		if (!keyword) return dataSource;
		return dataSource.filter((product) => {
			if (typeof (product === null || product === void 0 ? void 0 : product.title) !== "string") return false;
			return product.title.toLowerCase().indexOf(keyword.toLowerCase()) !== -1;
		});
	}, [keyword, dataSource]);
	const _groupedList = (0, react.useMemo)(() => {
		return require_utils.groupProductsByCategory(_filteredList || []);
	}, [_filteredList]);
	/**
	* @title: 根据模式获取显示的数据列表
	* @description: anchor模式显示全部分类数据，switch模式只显示当前选中分类的产品
	*/
	const _displayList = (0, react.useMemo)(() => {
		if (tabSwitchMode === "anchor") return _groupedList;
		if (!activeKey) return _groupedList;
		return _groupedList.filter((item) => {
			if (item.__typename === "category") return false;
			if ((0, _pisell_utils.isArr)(activeKey)) {
				if (activeKey.includes("0")) return true;
				return activeKey.includes(String(item.__categoryId));
			}
			if (activeKey === "0") return true;
			return String(item.__categoryId) === activeKey;
		});
	}, [
		tabSwitchMode,
		_groupedList,
		activeKey
	]);
	const _categories = (0, react.useMemo)(() => {
		return _groupedList.filter((item) => item.__typename === "category").map((item) => {
			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, {
				key: String(item.id),
				label: item.name
			});
		});
	}, [_groupedList]);
	/**
	* @title: 是否隐藏分类
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: WangHan
	* @Date: 2025-10-09 15:13
	*/
	const isHideCategory = (0, react.useMemo)(() => {
		if ((productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.layout) === 0) return true;
		if (hideCategoryWhenOne) return (_categories === null || _categories === void 0 ? void 0 : _categories.length) === 1 || !(_categories === null || _categories === void 0 ? void 0 : _categories.length);
		return false;
	}, [
		_categories,
		hideCategoryWhenOne,
		productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.layout
	]);
	(0, react.useEffect)(() => {
		if (!(_categories === null || _categories === void 0 ? void 0 : _categories.length)) {
			setActiveKey([]);
			return;
		}
		if (!activeKey) switchCategory("0");
		else if (!_categories.find((category) => category.key === activeKey)) switchCategory("0");
	}, [_categories]);
	(0, react.useLayoutEffect)(() => {
		if (_customScrollParent) setScrollParent(require_utils.getElementByIdentifier(_customScrollParent));
	}, [_customScrollParent]);
	const token = require_useToken.useToken(customToken);
	const cssVars = (0, react.useMemo)(() => require_useToken.genCSSVars(token), [token]);
	const mergedStyle = (0, react.useMemo)(() => {
		const baseStyle = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, cssVars), style);
		if (!scrollParent) return baseStyle;
		if (scrollParent !== containerRef.current) return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, baseStyle), {}, {
			overflow: "unset",
			height: "unset"
		});
		return baseStyle;
	}, [
		cssVars,
		style,
		scrollParent
	]);
	const disabled = (0, react.useMemo)(() => {
		return !!(productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.list_max_length) && Array.isArray(selectedItems) && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0;
	}, [productListSetting, selectedItems]);
	const _onChange = (0, react.useCallback)((value, type) => {
		if (disabled) return;
		onChange === null || onChange === void 0 || onChange(value, type);
	}, [disabled, onChange]);
	const debounceIndicator = (0, react.useCallback)((delay) => {
		isIndicatorVisibleRef.current = true;
		const timeoutId = setTimeout(() => {
			isIndicatorVisibleRef.current = false;
		}, delay);
		return () => clearTimeout(timeoutId);
	}, []);
	const lastActiveKeyRef = (0, react.useRef)("");
	/**
	* @title: 项目进入视口时的回调
	* @description: 仅在anchor模式下生效，用于滚动时自动切换高亮的分类Tab
	*/
	const handleItemIntersectionIn = (0, react.useCallback)((item) => {
		if (tabSwitchMode === "switch") return;
		const _key = String(item.__categoryId);
		if (!isIndicatorVisibleRef.current && _key && _key !== lastActiveKeyRef.current) {
			setActiveKey(_key);
			lastActiveKeyRef.current = _key;
		}
	}, [tabSwitchMode]);
	const _listContext = (0, react.useMemo)(() => {
		return {
			onItemIntersectionIn: handleItemIntersectionIn,
			onItemIntersectionOut: () => {}
		};
	}, [handleItemIntersectionIn]);
	/**
	* @title: 切换分类
	* @description: anchor模式下滚动到对应锚点，switch模式下只切换数据
	*/
	const switchCategory = (key) => {
		setActiveKey((0, _pisell_utils.isArr)(key) ? key : [key]);
		lastActiveKeyRef.current = key;
		if (tabSwitchMode === "switch") return;
		debounceIndicator(300);
		const categoryIndex = _groupedList.findIndex((item) => item.__typename === "category" && String(item.id) === key);
		const _scrollParent = scrollParent || containerRef.current;
		if (!_scrollParent || !containerRef.current) return;
		const target = document.getElementById(`ps_category_${key}`);
		if (!target) return;
		const productSelectWrapper = document.querySelector(`.${PREFIX}-wrapper`);
		const tabsWrapper = document.querySelector(`.${PREFIX}__tabs-wrapper`);
		const tabsHeight = (tabsWrapper === null || tabsWrapper === void 0 ? void 0 : tabsWrapper.offsetHeight) || 0;
		const offsetElement = require_utils.getElementByIdentifier(offsetDom);
		const extraOffset = offsetElement ? offsetElement.clientHeight : 0;
		if (categoryIndex === 0) {
			if (productSelectWrapper) _scrollParent.scrollTop = require_utils.getOffsetTopRelativeToScrollContainer(productSelectWrapper, _scrollParent) - extraOffset;
			return;
		} else _scrollParent.scrollTop = require_utils.getOffsetTopRelativeToScrollContainer(target, _scrollParent) - tabsHeight - extraOffset;
	};
	return /* @__PURE__ */ react.default.createElement("div", {
		ref: containerRef,
		className: (0, classnames.default)(PREFIX, CONTAINER_CLASS, {
			disabled,
			[`${PREFIX}-compact`]: compact
		}),
		style: mergedStyle
	}, showSearch ? /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__search-wrapper` }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Input, {
		ref: searchRef,
		prefix: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_SearchLg.default, null),
		style: { height: 44 },
		placeholder: _pisell_utils.locales.getText("pisell2.product-select.search"),
		allowClear: true,
		value: keyword,
		onChange: (e) => {
			setKeyword(e.target.value);
		}
	})) : null, !isHideCategory ? tabSwitchMode === "switch" ? /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellTabbarTemplate1, {
		style: {
			position: "sticky",
			top: 0,
			zIndex: 10,
			background: "var(--ps-container-bg, #fff)"
		},
		dataSource: _categories,
		value: activeKey,
		onChange: switchCategory,
		className: `${PREFIX}__tabs-wrapper`
	}) : /* @__PURE__ */ react.default.createElement(require_index$2.default, {
		activeKey,
		items: _categories,
		onChange: switchCategory,
		loading,
		skeleton: /* @__PURE__ */ react.default.createElement(require_CategorySkeleton.default, null)
	}) : null, !loading && !(_groupedList === null || _groupedList === void 0 ? void 0 : _groupedList.length) ? /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellEmpty, { description: emptyDescription || _pisell_utils.locales.getText("pisell2.product-select.empty") }) : /* @__PURE__ */ react.default.createElement(require_IntersectionObserver.default, {
		rootMargin: "-270px 0px -270px 0px",
		priorityMode: "top"
	}, /* @__PURE__ */ react.default.createElement(require_index.default, {
		className: (0, classnames.default)(`${PREFIX}__product-list`, { [`${PREFIX}__product-list_hide_category`]: isHideCategory }),
		loading,
		data: loading ? MOCK_DATA : _displayList,
		_customScrollParent: scrollParent,
		context: _listContext,
		components: gridComponents,
		itemContent: (index, item, context) => {
			var _productListSetting$g2;
			if (loading) {
				var _productListSetting$g, _productListSetting$s, _productListSetting$s2;
				return /* @__PURE__ */ react.default.createElement(require_ProductCardSkeleton.default, {
					index,
					item,
					imageWidth: productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.imgWidth,
					imageHeight: productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.imgHeight,
					style: {
						gap: (_productListSetting$g = productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.gap) !== null && _productListSetting$g !== void 0 ? _productListSetting$g : 20,
						padding: (productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.skuCardPaddingY) !== void 0 || (productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.skuCardPaddingX) !== void 0 ? `${(_productListSetting$s = productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.skuCardPaddingY) !== null && _productListSetting$s !== void 0 ? _productListSetting$s : 8}px ${(_productListSetting$s2 = productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.skuCardPaddingX) !== null && _productListSetting$s2 !== void 0 ? _productListSetting$s2 : 8}px` : void 0,
						minHeight: compact ? 88 : void 0
					}
				});
			}
			return /* @__PURE__ */ react.default.createElement(require_index$1.default, {
				index,
				item,
				context,
				scenario,
				onSelectCover: (e) => {
					_onChange(e, "cover");
				},
				onSelectInfo: (e) => {
					_onChange(e, "info");
				},
				isSelected: item.id === value,
				decorateConfig: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, productListSetting), {}, { gap: (_productListSetting$g2 = productListSetting === null || productListSetting === void 0 ? void 0 : productListSetting.gap) !== null && _productListSetting$g2 !== void 0 ? _productListSetting$g2 : 20 })
			});
		}
	})));
};
//#endregion
exports.PREFIX = PREFIX;
exports.default = index;
