import IntersectionObserverProvider, { IntersectionTrigger } from "../components/IntersectionObserver.js";
import TabsStructureWithSubComponents from "../components/TabsStructure/TabsStructure.js";
import { useSelectionIndicator } from "../components/TabsStructure/hooks.js";
import "./CategorySkeleton.js";
import "../index.js";
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import "../components/TabsStructure/TabsStructure.less";
//#region src/plus/productSelect/CategoryTabs/index.tsx
const CategoryTabs = forwardRef((props, ref) => {
	const { className, items, activeKey, onChange, loading = false, skeleton, style } = props;
	const railRef = useRef(null);
	const [isAtStart, setIsAtStart] = useState(true);
	const [isAtEnd, setIsAtEnd] = useState(false);
	const [needsScrollButtons, setNeedsScrollButtons] = useState(false);
	const scrollLeft = 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 = 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"
		});
	}, []);
	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 } = useSelectionIndicator(railRef, activeKey || "");
	if (loading && skeleton) return /* @__PURE__ */ React.createElement(React.Fragment, null, skeleton);
	return /* @__PURE__ */ React.createElement(IntersectionObserverProvider, null, items.length > 0 && /* @__PURE__ */ React.createElement("div", {
		className: `pisell-product-select__tabs-wrapper ${className || ""}`,
		id: props.id || "",
		style,
		id: props.id || ""
	}, /* @__PURE__ */ React.createElement(TabsStructureWithSubComponents, {
		variant: "pill",
		backgroundVariant: "onPage",
		selectedTab: activeKey
	}, needsScrollButtons && /* @__PURE__ */ React.createElement(TabsStructureWithSubComponents.ChevronButton, {
		direction: "prev",
		disabled: isAtStart,
		onClick: scrollLeft,
		style: { marginRight: "8px" }
	}), /* @__PURE__ */ React.createElement(TabsStructureWithSubComponents.Rail, { ref: railRef }, /* @__PURE__ */ React.createElement(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.createElement(TabsStructureWithSubComponents.SelectionIndicator, selectionIndicatorProps), /* @__PURE__ */ React.createElement(TabsStructureWithSubComponents.ListContainer, listContainerProps, items.map((item) => /* @__PURE__ */ React.createElement(TabsStructureWithSubComponents.Item, {
		key: item.key,
		tabId: item.key,
		"aria-selected": activeKey === item.key,
		onClick: () => onChange(item.key),
		className: "tab-item"
	}, item.label))), /* @__PURE__ */ React.createElement(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.createElement(TabsStructureWithSubComponents.ChevronButton, {
		direction: "next",
		disabled: isAtEnd,
		onClick: scrollRight,
		style: { marginLeft: "8px" }
	}))));
});
//#endregion
export { CategoryTabs as default };
