import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import IconFont from "../../iconfont/index.js";
import PisellCards from "../../PisellCards/index.js";
import PisellSuperTabs_default from "../../PisellSuperTabs/index.js";
import { DEFAULT_LEVEL_CONFIG, getExpandConfig } from "../constants.js";
import React, { memo } from "react";
//#region src/components/PisellTabbar2/components/TabbarLevel.tsx
/**
* Tabbar 层级组件
* 负责渲染单个层级的 Tab 导航
*/
const TabbarLevel = memo((props) => {
	const { skuId, dataSource, activePanelKey, level, setActivePanelKey, expand, handleExpand, renderChildren, levelConfig: customLevelConfig, expandConfig: customExpandConfig, superTabsProps, positionId, level2PositionId, panelVisible } = props;
	const levelConfig = _objectSpread2(_objectSpread2({}, DEFAULT_LEVEL_CONFIG[level]), customLevelConfig);
	const expandConfig = customExpandConfig || getExpandConfig();
	/**
	* 渲染 level1 卡片
	*/
	const renderLevel1Card = (cardProps) => {
		var _cardProps$active;
		const { dataSource: itemData } = cardProps;
		let _text = itemData.name;
		let _icon = itemData.icon;
		if (itemData.key === "expand") {
			_text = expandConfig[expand ? "active" : "inactive"].text;
			_icon = expandConfig[expand ? "active" : "inactive"].icon;
		}
		return /* @__PURE__ */ React.createElement(PisellCards.GraphicTextCard, _objectSpread2(_objectSpread2({}, cardProps), {}, {
			text: _text,
			icon: _icon,
			variant: "vertical-image",
			widthMode: "fixed",
			width: levelConfig.cardWidth,
			graphicConfig: {
				width: "100%",
				height: levelConfig.cardHeight,
				background: "#fff",
				iconSize: 30
			},
			style: {
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				background: "#fff",
				borderRadius: 8,
				border: `none`
			},
			textConfig: {
				textAlign: "center",
				color: "#fff",
				fontWeight: 400
			},
			active: {
				value: true,
				style: _objectSpread2(_objectSpread2({}, (_cardProps$active = cardProps.active) === null || _cardProps$active === void 0 ? void 0 : _cardProps$active.style), {}, {
					border: `none`,
					color: "#5D3F9F"
				})
			}
		}));
	};
	/**
	* 渲染 level1 普通卡片（非自定义点击）
	*/
	const renderLevel1NormalCard = (cardProps) => {
		var _cardProps$active2;
		const { dataSource: itemData } = cardProps;
		return /* @__PURE__ */ React.createElement(PisellCards.GraphicTextCard, _objectSpread2(_objectSpread2({}, cardProps), {}, {
			text: itemData.name,
			image: itemData.icon,
			variant: "card",
			widthMode: "fixed",
			width: levelConfig.cardWidth,
			textConfig: {
				color: "#FFF",
				maxLines: 2,
				ellipsis: true
			},
			active: _objectSpread2(_objectSpread2({}, cardProps.active), {}, { style: _objectSpread2(_objectSpread2({}, (_cardProps$active2 = cardProps.active) === null || _cardProps$active2 === void 0 ? void 0 : _cardProps$active2.style), {}, {
				color: "#000000",
				border: `none`,
				background: "#ffffff"
			}) }),
			style: {
				backgroundClip: "padding-box",
				border: `none`,
				background: "transparent"
			},
			graphicConfig: {
				aliWidth: 100,
				width: "100%",
				height: `${levelConfig.cardHeight}px`,
				dataSource: {
					alt: itemData.icon ? void 0 : itemData.name,
					text: itemData.name === "All" ? "All" : void 0
				}
			}
		}));
	};
	/**
	* 渲染 level2 自定义点击卡片
	*/
	const renderLevelNCard = (cardProps) => {
		var _cardProps$active3;
		const { dataSource: itemData } = cardProps;
		let _text = itemData.name;
		itemData.icon;
		if (itemData.key === "expand") {
			_text = expandConfig[expand ? "active" : "inactive"].text;
			expandConfig[expand ? "active" : "inactive"].icon;
		}
		return /* @__PURE__ */ React.createElement(PisellCards.TextCard, _objectSpread2(_objectSpread2({}, cardProps), {}, {
			text: _text,
			variant: "outlined",
			widthMode: "fixed",
			prefixIcon: itemData.key === "expand" ? /* @__PURE__ */ React.createElement(IconFont, {
				type: expandConfig[expand ? "active" : "inactive"].icon,
				style: {
					color: "#fff",
					fontSize: 20
				}
			}) : void 0,
			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: _objectSpread2(_objectSpread2({}, cardProps.active), {}, { style: _objectSpread2(_objectSpread2({}, (_cardProps$active3 = cardProps.active) === null || _cardProps$active3 === void 0 ? void 0 : _cardProps$active3.style), {}, {
				color: "#000000",
				background: "#ffffff"
			}) })
		}));
	};
	/**
	* 渲染 level2 普通卡片
	*/
	const renderLevelNNormalCard = (cardProps) => {
		var _cardProps$active4;
		const { dataSource: itemData } = cardProps;
		return /* @__PURE__ */ React.createElement(PisellCards.TextCard, _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: "transparent"
			},
			width: levelConfig.cardWidth,
			active: _objectSpread2(_objectSpread2({}, cardProps.active), {}, { style: _objectSpread2(_objectSpread2({}, (_cardProps$active4 = cardProps.active) === null || _cardProps$active4 === void 0 ? void 0 : _cardProps$active4.style), {}, {
				color: "#000000",
				background: "#ffffff"
			}) })
		}));
	};
	const renderLevelNNormalCard3 = (cardProps) => {
		var _cardProps$active5;
		const { dataSource: itemData } = cardProps;
		return /* @__PURE__ */ React.createElement(PisellCards.TextCard, _objectSpread2(_objectSpread2({}, cardProps), {}, {
			text: itemData.name,
			variant: "filled",
			widthMode: "fixed",
			textConfig: {
				textAlign: "center",
				color: "#FFF",
				maxLines: 2,
				ellipsis: true
			},
			style: {
				height: levelConfig.cardHeight,
				borderRadius: "88px",
				background: "#292929",
				minWidth: 100
			},
			width: levelConfig.cardWidth,
			active: _objectSpread2(_objectSpread2({}, cardProps.active), {}, { style: _objectSpread2(_objectSpread2({}, (_cardProps$active5 = cardProps.active) === null || _cardProps$active5 === void 0 ? void 0 : _cardProps$active5.style), {}, {
				color: "#000000",
				background: "#ffffff"
			}) })
		}));
	};
	/**
	* 渲染 Tab 项
	*/
	const renderItem = (itemProps) => {
		const { dataSource: itemData } = itemProps;
		if (itemData === null || itemData === void 0 ? void 0 : itemData.customClick) return /* @__PURE__ */ React.createElement(PisellCards.MultilevelCard, _objectSpread2(_objectSpread2({}, itemProps), {}, {
			card: (cardProps) => {
				if (level === "level1") return renderLevel1Card(cardProps);
				return renderLevelNCard(cardProps);
			},
			onClick: handleExpand
		}));
		let panelStyle = {};
		if (itemProps.dataSource.childrenMaxLevel >= 2) panelStyle = _objectSpread2(_objectSpread2({}, superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.panelStyle), panelVisible !== void 0 ? { transform: panelVisible ? "translateX(0)" : "translateX(110%)" } : {});
		return /* @__PURE__ */ React.createElement(PisellCards.MultilevelCard, _objectSpread2(_objectSpread2({}, itemProps), {}, {
			panelWidthMode: "auto",
			card: (cardProps) => {
				if (level === "level1") return renderLevel1NormalCard(cardProps);
				if (level === "level3") return renderLevelNNormalCard3(cardProps);
				return renderLevelNNormalCard(cardProps);
			},
			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 renderChildren === null || renderChildren === void 0 ? void 0 : renderChildren(panelProps);
				return null;
			},
			panelStyle,
			panelContainer: (panelProps) => {
				var _panelProps$dataSourc2;
				const childrenMaxLevel = ((_panelProps$dataSourc2 = panelProps.dataSource) === null || _panelProps$dataSourc2 === void 0 ? void 0 : _panelProps$dataSourc2.childrenMaxLevel) || 2;
				let _positionId = positionId || "";
				if (level2PositionId && childrenMaxLevel < 2) _positionId = level2PositionId;
				if (_positionId) return document.querySelector(_positionId);
				return null;
			}
		}));
	};
	return /* @__PURE__ */ React.createElement(PisellSuperTabs_default, {
		id: skuId,
		tabItemStyle: {},
		dataSource,
		value: activePanelKey,
		onChange: setActivePanelKey,
		rowKey: "id",
		className: superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.className,
		style: _objectSpread2({
			flex: 1,
			background: levelConfig.superTabsBg
		}, (superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.style) || {}),
		gridProps: _objectSpread2({
			direction: "horizontal",
			gap: 4,
			wrap: expand ? "wrap" : "nowrap"
		}, (superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.gridProps) || {}),
		scrollViewProps: _objectSpread2({
			style: { padding: "4px 8px" },
			overflow: !expand ? "x" : "hidden",
			scrollbarStyle: "none",
			scrollActionsConfig: {
				type: "lrArrows",
				show: true
			}
		}, (superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.scrollViewProps) || {}),
		renderItem
	});
});
TabbarLevel.displayName = "TabbarLevel";
//#endregion
export { TabbarLevel as default };
