const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../locales/index.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_index$1 = require("../iconfont/index.js");
const require_index$2 = require("../PisellCards/index.js");
const require_index$3 = require("../pisellFind/index.js");
const require_index$4 = require("../PisellSuperTabs/index.js");
const require_constants = require("./constants.js");
const require_useActiveKey = require("./hooks/useActiveKey.js");
const require_useExpand = require("./hooks/useExpand.js");
const require_mock = require("./mock.js");
const require_index$5 = require("./utils/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./PisellTabbar.less");
//#region src/components/PisellTabbar/PisellTabbar.tsx
/**
* PisellTabbar - 多层级 Tabbar 组件
*
* 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
*
* @component
* @example
* ```tsx
* <PisellTabbar
*   dataSource={categoryData}
*   value={[1, 10, 100]}
*   onChange={(value) => console.log('当前选中:', value)}
* />
* ```
*/
const PisellTabbar = (0, react.forwardRef)((props, ref) => {
	const { dataSource = (props === null || props === void 0 ? void 0 : props.__designMode) ? require_mock.default : require_mock.default, value, onChange, className, style, levelConfig: customLevelConfig, expandConfig: customExpandConfig, maxLevel = 3, onSearch } = props;
	const containerRef = (0, react.useRef)(null);
	const searchRef = (0, react.useRef)(null);
	console.log("searchRef", searchRef.current);
	const { activeKey, setActiveKey, getActiveKey, _setActiveKey, setCacheActiveKey, resetActiveKey, getCacheActiveKey } = require_useActiveKey.default({
		initialActiveKey: value || require_index$5.getDefaultActiveKey(dataSource, "id"),
		onChange
	});
	const level1Value = (0, react.useMemo)(() => {
		return getActiveKey(0);
	}, [activeKey]);
	const level2Value = (0, react.useMemo)(() => {
		return getActiveKey(1);
	}, [activeKey]);
	const level3Value = (0, react.useMemo)(() => {
		return getActiveKey(2);
	}, [activeKey]);
	const { expand, toggleExpand, getExpand } = require_useExpand.default();
	const expandConfigData = customExpandConfig || require_constants.getExpandConfig();
	/**
	* 打开搜索模式
	*/
	const openSearchMode = () => {
		setCacheActiveKey(activeKey);
		_setActiveKey([]);
		onChange === null || onChange === void 0 || onChange([]);
	};
	/**
	* 关闭搜索模式
	*/
	const closeSearchMode = () => {
		onSearch === null || onSearch === void 0 || onSearch("");
		resetActiveKey();
	};
	(0, react.useImperativeHandle)(ref, () => {
		var _searchRef$current;
		if (props === null || props === void 0 ? void 0 : props.__designMode) return containerRef.current;
		return { closeSearchMode: searchRef === null || searchRef === void 0 || (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.close };
	});
	/**
	* 同步外部 value 到内部状态
	*/
	(0, react.useEffect)(() => {
		if (value) _setActiveKey(value);
	}, [JSON.stringify(value)]);
	/**
	* 获取层级配置
	*/
	const getLevelConfig = (0, react.useCallback)((level) => {
		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, require_constants.DEFAULT_LEVEL_CONFIG[level]), customLevelConfig === null || customLevelConfig === void 0 ? void 0 : customLevelConfig[level]);
	}, [customLevelConfig]);
	/**
	* 处理一级 Tab 切换
	*/
	const handleLevel1Change = (0, react.useCallback)((key, item) => {
		var _item$children;
		setActiveKey(0, key, (item === null || item === void 0 || (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) ? 0 : void 0);
	}, [setActiveKey]);
	/**
	* 处理二级 Tab 切换
	*/
	const handleLevel2Change = (0, react.useCallback)((key, item) => {
		var _item$children2;
		setActiveKey(1, key, (item === null || item === void 0 || (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) ? 0 : void 0);
	}, [setActiveKey]);
	/**
	* 处理三级 Tab 切换
	*/
	const handleLevel3Change = (0, react.useCallback)((key) => {
		setActiveKey(2, key);
	}, [setActiveKey]);
	/**
	* 渲染 level2/level3 自定义点击卡片（如展开按钮）
	*/
	const renderLevelNCard = (0, react.useCallback)((cardProps, level) => {
		var _cardProps$active;
		const { dataSource: itemData } = cardProps;
		const levelConfig = getLevelConfig(level);
		return /* @__PURE__ */ react.default.createElement(require_index$2.default.TextCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ text: itemData.text }, cardProps), {}, {
			variant: "outlined",
			widthMode: "fixed",
			textConfig: {
				textAlign: "center",
				color: "#FFF",
				flex: "none"
			},
			style: {
				borderRadius: "8px",
				background: "rgba(0, 0, 0, 0.50)",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				height: levelConfig.cardHeight
			},
			width: levelConfig.cardWidth,
			active: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, cardProps.active), {}, { style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (_cardProps$active = cardProps.active) === null || _cardProps$active === void 0 ? void 0 : _cardProps$active.style), {}, {
				color: "#000000",
				background: "#ffffff"
			}) })
		}));
	}, [
		activeKey,
		getLevelConfig,
		getExpand,
		expandConfigData
	]);
	/**
	* 渲染 level2/level3 普通卡片
	*/
	const renderLevelNNormalCard = (0, react.useCallback)((cardProps, level) => {
		var _cardProps$active2;
		const { dataSource: itemData } = cardProps;
		const levelConfig = getLevelConfig(level);
		return /* @__PURE__ */ react.default.createElement(require_index$2.default.TextCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, cardProps), {}, {
			text: itemData.name,
			variant: "outlined",
			widthMode: "fixed",
			textConfig: {
				textAlign: "center",
				color: "#FFF",
				maxLines: 2,
				ellipsis: true
			},
			style: {
				height: levelConfig.cardHeight,
				borderRadius: "8px",
				background: "rgba(0, 0, 0, 0.50)"
			},
			width: levelConfig.cardWidth,
			active: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, cardProps.active), {}, { style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (_cardProps$active2 = cardProps.active) === null || _cardProps$active2 === void 0 ? void 0 : _cardProps$active2.style), {}, {
				color: "#000000",
				background: "#ffffff"
			}) })
		}));
	}, [activeKey, getLevelConfig]);
	/**
	* 一级数据源
	*/
	const level1DataSource = (0, react.useMemo)(() => require_index$5.addDataSourceItemsByKey(dataSource, require_constants.LEVEL_ADD_ITEMS.level1), [dataSource]);
	/**
	* 渲染三级 Tabbar
	*/
	const renderLevel3 = (0, react.useCallback)((panelProps2) => {
		if (maxLevel < 3) return null;
		let _dataSource2 = panelProps2.dataSource.children || [];
		if (_dataSource2.length) _dataSource2 = require_index$5.addDataSourceItemsByKey(_dataSource2, require_constants.LEVEL_ADD_ITEMS.level3);
		const level3Config = getLevelConfig("level3");
		const level3Expand = getExpand("level3");
		/**
		* 渲染三级 Tab 项
		*/
		const renderLevel3Item = (itemProps) => {
			const { dataSource: itemData } = itemProps;
			if (itemData === null || itemData === void 0 ? void 0 : itemData.customClick) {
				if (itemProps.dataSource.key === "expand") return renderExpand(itemProps, "level3");
			}
			return /* @__PURE__ */ react.default.createElement(require_index$2.default.MultilevelCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps), {}, {
				card: (cardProps) => renderLevelNNormalCard(cardProps, "level3"),
				panelContainer: () => document.querySelector(`.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps2.dataSource.id}`)
			}));
		};
		return /* @__PURE__ */ react.default.createElement(require_index$4.default, {
			id: `sku-list-tabbar-${panelProps2.dataSource.id}`,
			tabItemStyle: {},
			isControlled: true,
			dataSource: _dataSource2,
			value: level3Value,
			onChange: handleLevel3Change,
			rowKey: "id",
			style: {
				flex: 1,
				background: level3Config.superTabsBg
			},
			gridProps: {
				direction: "horizontal",
				gap: 4,
				wrap: level3Expand ? "wrap" : "nowrap",
				startSlot: /* @__PURE__ */ react.default.createElement("div", { style: { paddingLeft: level3Config.paddingLeft } }, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
					type: "pisell2-trend-down-01",
					style: {
						color: "#fff",
						fontSize: 24,
						marginRight: 8
					}
				}))
			},
			scrollViewProps: {
				style: { padding: "4px 8px" },
				overflow: !level3Expand ? "x" : "hidden",
				scrollbarStyle: "none",
				scrollActionsConfig: {
					type: "lrArrows",
					show: true
				}
			},
			renderItem: renderLevel3Item
		});
	}, [
		activeKey,
		maxLevel,
		getActiveKey,
		handleLevel3Change,
		getExpand,
		toggleExpand,
		getLevelConfig,
		renderLevelNCard,
		renderLevelNNormalCard
	]);
	/**
	* 渲染二级 Tabbar
	*/
	const renderLevel2 = (0, react.useCallback)((panelProps) => {
		if (maxLevel < 2) return null;
		let _dataSource = panelProps.dataSource.children || [];
		if (_dataSource.length) _dataSource = require_index$5.addDataSourceItemsByKey(_dataSource, require_constants.LEVEL_ADD_ITEMS.level2);
		const level2Config = getLevelConfig("level2");
		const level2Expand = getExpand("level2");
		/**
		* 渲染二级 Tab 项
		*/
		const renderLevel2Item = (itemProps) => {
			const { dataSource: itemData } = itemProps;
			if (itemData === null || itemData === void 0 ? void 0 : itemData.customClick) {
				if (itemProps.dataSource.key === "expand") return renderExpand(itemProps, "level2");
			}
			return /* @__PURE__ */ react.default.createElement(require_index$2.default.MultilevelCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps), {}, {
				card: (cardProps) => renderLevelNNormalCard(cardProps, "level2"),
				panel: (innerPanelProps) => {
					var _innerPanelProps$data;
					if (innerPanelProps === null || innerPanelProps === void 0 || (_innerPanelProps$data = innerPanelProps.dataSource) === null || _innerPanelProps$data === void 0 || (_innerPanelProps$data = _innerPanelProps$data.children) === null || _innerPanelProps$data === void 0 ? void 0 : _innerPanelProps$data.length) return renderLevel3(innerPanelProps);
					return null;
				},
				panelContainer: () => document.querySelector(`.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps.dataSource.id}`)
			}));
		};
		return /* @__PURE__ */ react.default.createElement(require_index$4.default, {
			id: `sku-list-tabbar-${panelProps.dataSource.id}`,
			tabItemStyle: {},
			dataSource: _dataSource,
			value: level2Value,
			isControlled: true,
			onChange: handleLevel2Change,
			rowKey: "id",
			style: {
				flex: 1,
				background: level2Config.superTabsBg
			},
			gridProps: {
				direction: "horizontal",
				gap: 4,
				wrap: level2Expand ? "wrap" : "nowrap",
				startSlot: /* @__PURE__ */ react.default.createElement("div", { style: { paddingLeft: level2Config.paddingLeft } }, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
					type: "pisell2-trend-down-01",
					style: {
						color: "#fff",
						fontSize: 24,
						marginRight: 8
					}
				}))
			},
			scrollViewProps: {
				style: { padding: "4px 8px" },
				overflow: !level2Expand ? "x" : "hidden",
				scrollbarStyle: "none",
				scrollActionsConfig: {
					type: "lrArrows",
					show: true
				}
			},
			renderItem: renderLevel2Item
		});
	}, [
		activeKey,
		maxLevel,
		getActiveKey,
		handleLevel2Change,
		getExpand,
		toggleExpand,
		getLevelConfig,
		renderLevelNCard,
		renderLevelNNormalCard,
		renderLevel3
	]);
	const renderExpand = (0, react.useCallback)((itemProps, level) => {
		return /* @__PURE__ */ react.default.createElement(require_index$2.default.MultilevelCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps), {}, {
			card: (cardProps) => {
				let _cardProps = require_objectSpread2._objectSpread2({}, cardProps);
				const isExpand = getExpand(level);
				_cardProps.text = expandConfigData[isExpand ? "active" : "inactive"].text;
				_cardProps.prefixIcon = /* @__PURE__ */ react.default.createElement(require_index$1.default, {
					type: expandConfigData[isExpand ? "active" : "inactive"].icon,
					style: {
						color: "#fff",
						fontSize: 20
					}
				});
				return renderLevelNCard(_cardProps, level);
			},
			onClick: () => {
				toggleExpand(level);
			}
		}));
	}, [expand]);
	const renderSearch = (0, react.useCallback)((itemProps, level) => {
		return /* @__PURE__ */ react.default.createElement(require_index$3.PisellFind, {
			showHistory: false,
			modalWidth: "100%",
			ref: searchRef,
			onSearch: (e) => {
				onSearch === null || onSearch === void 0 || onSearch(e);
			},
			getContainer: () => {
				return document.querySelector("#sku-list-tabbar") || document.body;
			},
			modalStyle: { width: "100%" },
			onOpen: openSearchMode,
			onClose: closeSearchMode,
			trigger: /* @__PURE__ */ react.default.createElement(require_index$2.default.MultilevelCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps), {}, { card: (cardProps) => {
				return renderLevelNCard(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, cardProps), {}, { text: /* @__PURE__ */ react.default.createElement("div", { style: {
					display: "flex",
					alignItems: "center",
					gap: 4
				} }, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
					type: "pisell2-search-lg",
					style: {
						color: "#fff",
						fontSize: 20
					}
				}), /* @__PURE__ */ react.default.createElement(require_index$1.default, {
					type: "pisell2-scan",
					style: {
						color: "#fff",
						fontSize: 20
					}
				}), /* @__PURE__ */ react.default.createElement("span", null, require_index.getText("table-filter-find"))) }), level);
			} }))
		});
	}, [activeKey]);
	/**
	* 渲染一级 Tab 项
	*/
	const renderLevel1Item = (0, react.useCallback)((itemProps) => {
		const { dataSource: itemData } = itemProps;
		if (itemData === null || itemData === void 0 ? void 0 : itemData.customClick) {
			if (itemProps.dataSource.key === "search") return renderSearch(itemProps, "level1");
			if (itemProps.dataSource.key === "expand") return renderExpand(itemProps, "level1");
			return null;
		}
		return /* @__PURE__ */ react.default.createElement(require_index$2.default.MultilevelCard, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps), {}, {
			card: (cardProps) => renderLevelNNormalCard(cardProps, "level1"),
			panel: (panelProps) => {
				var _panelProps$dataSourc;
				if (panelProps === null || panelProps === void 0 || (_panelProps$dataSourc = panelProps.dataSource) === null || _panelProps$dataSourc === void 0 || (_panelProps$dataSourc = _panelProps$dataSourc.children) === null || _panelProps$dataSourc === void 0 ? void 0 : _panelProps$dataSourc.length) return renderLevel2(panelProps);
				return null;
			},
			panelContainer: () => document.querySelector(`.pisell-super-tabs-slot-bottom-sku-list-tabbar`)
		}));
	}, [
		activeKey,
		getLevelConfig,
		getExpand,
		toggleExpand,
		renderLevelNCard,
		renderLevelNNormalCard,
		renderLevel2
	]);
	const level1Config = getLevelConfig("level1");
	const level1Expand = getExpand("level1");
	return dataSource.length ? /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-tabbar", className),
		style,
		ref: containerRef
	}, /* @__PURE__ */ react.default.createElement(require_index$4.default, {
		isControlled: true,
		id: "sku-list-tabbar",
		tabItemStyle: {},
		dataSource: level1DataSource,
		value: level1Value,
		onChange: handleLevel1Change,
		rowKey: "id",
		style: {
			flex: 1,
			background: level1Config.superTabsBg
		},
		gridProps: {
			direction: "horizontal",
			gap: 4,
			wrap: level1Expand ? "wrap" : "nowrap"
		},
		scrollViewProps: {
			style: { padding: "4px 8px" },
			overflow: !level1Expand ? "x" : "hidden",
			scrollbarStyle: "none",
			scrollActionsConfig: {
				type: "lrArrows",
				show: true
			}
		},
		renderItem: renderLevel1Item
	})) : null;
});
PisellTabbar.displayName = "PisellTabbar";
//#endregion
exports.default = PisellTabbar;
