import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import index from "../../../../plus/productSelect/index.js";
import List from "../../../list/List.js";
import SkuCard from "../../../../plus/productSelect/ProductCard/SkuCard/index.js";
import { formatSkuDataSource, generateProductTabs } from "./utils.js";
import React, { useMemo, useRef, useState } from "react";
import { locales } from "@pisell/utils";
import { Input } from "@pisell/materials";
import SearchLg from "@pisell/icon/es/SearchLg";
import { useSize } from "ahooks";
import "./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 = useRef(null);
	const [keyword, setKeyword] = useState("");
	const size = useSize(listRef);
	const renderProductSelect = 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.createElement(index, {
			dataSource,
			layout,
			onChange: onSelectProduct,
			value: currentProductId,
			loading,
			productListSetting,
			showSearch,
			showTab,
			emptyDescription,
			style
		});
	}, [
		config.productSelectConfig,
		dataSource,
		currentProductId,
		onSelectProduct,
		loading,
		emptyDescription,
		style
	]);
	const _filteredList = 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 = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", { className: `pisell-product-display-adapter__search-wrapper` }, /* @__PURE__ */ React.createElement(Input, {
			prefix: /* @__PURE__ */ React.createElement(SearchLg, null),
			style: { height: 44 },
			placeholder: locales.getText("pisell2.product-select.search"),
			allowClear: true,
			value: keyword,
			onChange: (e) => {
				setKeyword(e.target.value);
			}
		}));
	}, [keyword]);
	const tabData = useMemo(() => {
		const { listConfig = {} } = config.skuListConfig || {};
		const enableTab = listConfig.showTab || false;
		const tabStyle = listConfig.tabStyle || "switch";
		return enableTab ? generateProductTabs(_filteredList, tabStyle) : void 0;
	}, [_filteredList]);
	const renderSkuList = 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 _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.createElement("div", {
			className: `sku-list-container ${className || ""}`,
			style,
			ref: listRef
		}, /* @__PURE__ */ React.createElement(List, {
			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.createElement(SkuCard, _objectSpread2(_objectSpread2({ key: item.id }, skuCardAllConfig), {}, {
				dataSource: 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
export { ProductDisplayAdapter as default };
