const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_index = require("../../../../plus/productSelect/index.js");
const require_List = require("../../../list/List.js");
const require_index$1 = require("../../../../plus/productSelect/ProductCard/SkuCard/index.js");
const require_utils = require("./utils.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 ahooks = require("ahooks");
require("./index.less");
//#region src/components/ticketBooking/components/ProductDisplayAdapter/ProductDisplayAdapter.tsx
/**
* 产品展示适配器组件
* 统一管理 ProductSelect 和 SkuList 两种展示模式
*/
const ProductDisplayAdapter = (props) => {
	const { config, dataSource, loading = false, currentProductId, onSelectProduct, emptyDescription, style, className } = props;
	const { displayMode = "product-select" } = config;
	const listRef = (0, react.useRef)(null);
	const [keyword, setKeyword] = (0, react.useState)("");
	const size = (0, ahooks.useSize)(listRef);
	const renderProductSelect = (0, react.useMemo)(() => {
		const { showSearch = true, showTab = true, layout = {
			grid: true,
			config: "12:12"
		}, productListSetting = {
			isProductCover: 1,
			isTitle: 1,
			isSubtitle: 1,
			isPrice: 1,
			isOriginPrice: 0,
			isStock: 0
		} } = config.productSelectConfig || {};
		return /* @__PURE__ */ react.default.createElement(require_index.default, {
			dataSource,
			layout,
			onChange: onSelectProduct,
			value: currentProductId,
			loading,
			productListSetting,
			showSearch,
			showTab,
			emptyDescription,
			style
		});
	}, [
		config.productSelectConfig,
		dataSource,
		currentProductId,
		onSelectProduct,
		loading,
		emptyDescription,
		style
	]);
	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 searchDom = (0, react.useMemo)(() => {
		return /* @__PURE__ */ react.default.createElement("div", { className: `pisell-product-display-adapter__search-wrapper` }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Input, {
			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);
			}
		}));
	}, [keyword]);
	const tabData = (0, react.useMemo)(() => {
		const { listConfig = {} } = config.skuListConfig || {};
		const enableTab = listConfig.showTab || false;
		const tabStyle = listConfig.tabStyle || "switch";
		return enableTab ? require_utils.generateProductTabs(_filteredList, tabStyle) : void 0;
	}, [_filteredList]);
	const renderSkuList = (0, react.useMemo)(() => {
		const { listConfig = {}, skuCardAllConfig = {} } = config.skuListConfig || {};
		const displayStyle = listConfig.layout || "grid";
		const columns = listConfig.columns || 2;
		const paginationType = listConfig.showPagination ? "pager" : "all";
		const enableTab = listConfig.showTab || false;
		const tabStyle = listConfig.tabStyle || "switch";
		const stickyTop = listConfig.stickyTop !== void 0 ? listConfig.stickyTop : true;
		const filteredData = _filteredList.map((item) => {
			var _item$category, _item$category$map;
			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { category: ((_item$category = item.category) === null || _item$category === void 0 || (_item$category$map = _item$category.map) === null || _item$category$map === void 0 ? void 0 : _item$category$map.call(_item$category, (category) => `${category.id}`)) || [] });
		});
		console.log(tabData, "tabData123");
		return /* @__PURE__ */ react.default.createElement("div", {
			className: `sku-list-container ${className || ""}`,
			style,
			ref: listRef
		}, /* @__PURE__ */ react.default.createElement(require_List.default, {
			className: "sku-list",
			style: {
				maxHeight: size === null || size === void 0 ? void 0 : size.height,
				overflow: "auto"
			},
			data: filteredData,
			renderSearch: () => searchDom,
			loading: false,
			displayStyle,
			columns,
			paginationType,
			layoutDirection: "vertical",
			tabStyle: enableTab ? tabStyle : "none",
			tabData,
			tabGroup: "category",
			stickyTop,
			emptyConfig: {
				show: !loading && filteredData.length === 0,
				text: emptyDescription
			},
			renderItem: (item, index) => /* @__PURE__ */ react.default.createElement(require_index$1.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ key: item.id }, skuCardAllConfig), {}, {
				dataSource: require_utils.formatSkuDataSource(item),
				onCardClick: () => onSelectProduct(item),
				isSelected: item.id === currentProductId
			}))
		}));
	}, [
		config.skuListConfig,
		dataSource,
		loading,
		currentProductId,
		onSelectProduct,
		emptyDescription,
		style,
		className,
		size === null || size === void 0 ? void 0 : size.height,
		_filteredList,
		tabData
	]);
	if (displayMode === "sku-list") return renderSkuList;
	return renderProductSelect;
};
//#endregion
exports.default = ProductDisplayAdapter;
