const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_IntersectionObserver = require("../components/IntersectionObserver.js");
const require_TabsStructure = require("../components/TabsStructure/TabsStructure.js");
const require_hooks = require("../components/TabsStructure/hooks.js");
require("./CategorySkeleton.js");
require("../index.js");
let react = require("react");
react = require_runtime.__toESM(react);
require("../components/TabsStructure/TabsStructure.less");
//#region src/plus/productSelect/CategoryTabs/index.tsx
const CategoryTabs = (0, react.forwardRef)((props, ref) => {
	const { className, items, activeKey, onChange, loading = false, skeleton, style } = props;
	const railRef = (0, react.useRef)(null);
	const [isAtStart, setIsAtStart] = (0, react.useState)(true);
	const [isAtEnd, setIsAtEnd] = (0, react.useState)(false);
	const [needsScrollButtons, setNeedsScrollButtons] = (0, react.useState)(false);
	const scrollLeft = (0, react.useCallback)(() => {
		if (!railRef.current) return;
		const container = railRef.current;
		const scrollAmount = container.clientWidth * .8;
		const newPosition = Math.max(0, container.scrollLeft - scrollAmount);
		container.scrollTo({
			left: newPosition,
			behavior: "smooth"
		});
	}, []);
	const scrollRight = (0, react.useCallback)(() => {
		if (!railRef.current) return;
		const container = railRef.current;
		const scrollAmount = container.clientWidth * .8;
		const maxScroll = container.scrollWidth - container.clientWidth;
		const newPosition = Math.min(maxScroll, container.scrollLeft + scrollAmount);
		container.scrollTo({
			left: newPosition,
			behavior: "smooth"
		});
	}, []);
	(0, react.useEffect)(() => {
		const updateScrollButtonsVisibility = () => {
			if (railRef.current) {
				const { scrollWidth, clientWidth } = railRef.current;
				console.log("检测滚动按钮需求:", {
					scrollWidth,
					clientWidth,
					needsScroll: scrollWidth > clientWidth
				});
				setNeedsScrollButtons(scrollWidth > clientWidth);
			}
		};
		let resizeObserver = null;
		const timer = setTimeout(() => {
			const container = railRef.current;
			if (!container) {
				console.log("容器未找到，跳过滚动按钮检测");
				return;
			}
			updateScrollButtonsVisibility();
			resizeObserver = new ResizeObserver(updateScrollButtonsVisibility);
			resizeObserver.observe(container);
		}, 100);
		return () => {
			clearTimeout(timer);
			if (resizeObserver) resizeObserver.disconnect();
		};
	}, [items]);
	const { selectionIndicatorProps, listContainerProps } = require_hooks.useSelectionIndicator(railRef, activeKey || "");
	if (loading && skeleton) return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, skeleton);
	return /* @__PURE__ */ react.default.createElement(require_IntersectionObserver.default, null, items.length > 0 && /* @__PURE__ */ react.default.createElement("div", {
		className: `pisell-product-select__tabs-wrapper ${className || ""}`,
		id: props.id || "",
		style,
		id: props.id || ""
	}, /* @__PURE__ */ react.default.createElement(require_TabsStructure.default, {
		variant: "pill",
		backgroundVariant: "onPage",
		selectedTab: activeKey
	}, needsScrollButtons && /* @__PURE__ */ react.default.createElement(require_TabsStructure.default.ChevronButton, {
		direction: "prev",
		disabled: isAtStart,
		onClick: scrollLeft,
		style: { marginRight: "8px" }
	}), /* @__PURE__ */ react.default.createElement(require_TabsStructure.default.Rail, { ref: railRef }, /* @__PURE__ */ react.default.createElement(require_IntersectionObserver.IntersectionTrigger, {
		onShow: () => {
			console.log("is start");
			setIsAtStart(true);
		},
		onHide: () => {
			console.log("is start false");
			setIsAtStart(false);
		},
		style: {
			width: 1,
			height: 1,
			flexShrink: 0,
			background: "rgba(0,0,0,0)",
			transform: "translateX(1px)"
		},
		className: "visibility-detector start-detector"
	}), /* @__PURE__ */ react.default.createElement(require_TabsStructure.default.SelectionIndicator, selectionIndicatorProps), /* @__PURE__ */ react.default.createElement(require_TabsStructure.default.ListContainer, listContainerProps, items.map((item) => /* @__PURE__ */ react.default.createElement(require_TabsStructure.default.Item, {
		key: item.key,
		tabId: item.key,
		"aria-selected": activeKey === item.key,
		onClick: () => onChange(item.key),
		className: "tab-item"
	}, item.label))), /* @__PURE__ */ react.default.createElement(require_IntersectionObserver.IntersectionTrigger, {
		className: "visibility-detector end-detector",
		onShow: () => {
			console.log("is end");
			setIsAtEnd(true);
		},
		onHide: () => {
			console.log("is end false");
			setIsAtEnd(false);
		},
		style: {
			width: 1,
			height: 1,
			flexShrink: 0,
			background: "rgba(0,0,0,0)",
			transform: "translateX(-1px)"
		}
	})), needsScrollButtons && /* @__PURE__ */ react.default.createElement(require_TabsStructure.default.ChevronButton, {
		direction: "next",
		disabled: isAtEnd,
		onClick: scrollRight,
		style: { marginLeft: "8px" }
	}))));
});
//#endregion
exports.default = CategoryTabs;
