import React, { useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDebounceFn } from "ahooks";
import ChevronLeft from "@pisell/icon/es/ChevronLeft";
import ChevronRight from "@pisell/icon/es/ChevronRight";
import "./index.less";
//#region src/components/pisellAnchor/index.tsx
const PisellAnchor = ({ options = [], tab, className, style, onChange, onTabClick, containerRef, platform = "pc" }) => {
	const contentRef = useRef(null);
	const isClickScrolling = useRef(false);
	const [leftWidth, setLeftWidth] = useState(0);
	const [rightWidth, setRightWidth] = useState(40);
	const [showButtons, setShowButtons] = useState(false);
	useEffect(() => {
		if (contentRef.current) {
			const { scrollWidth, clientWidth } = contentRef.current;
			setShowButtons(scrollWidth > clientWidth);
		}
	}, [options]);
	const handleHorizontalScroll = useDebounceFn((e) => {
		const { scrollLeft, scrollWidth, clientWidth } = e.target;
		setLeftWidth(scrollLeft > 0 ? 40 : 0);
		setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
	}, { wait: 200 }).run;
	const handleContentScroll = useDebounceFn(() => {
		if (isClickScrolling.current || !(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) return;
		const container = containerRef.current;
		const scrollTop = container.scrollTop;
		const containerHeight = container.clientHeight;
		const scrollHeight = container.scrollHeight;
		if (Math.abs(scrollTop + containerHeight - scrollHeight) < 1) {
			const lastOption = options[options.length - 1];
			if (lastOption && tab !== lastOption.id) onChange === null || onChange === void 0 || onChange(lastOption.id);
			return;
		}
		let maxVisibleRatio = 0;
		let activeOption = null;
		for (const option of options) {
			const element = document.querySelector(`[data-section="${option.id}"]`);
			if (element instanceof HTMLElement) {
				const elementTop = element.offsetTop;
				const elementHeight = element.offsetHeight;
				const elementBottom = elementTop + elementHeight;
				const visibleTop = Math.max(elementTop, scrollTop);
				const visibleBottom = Math.min(elementBottom, scrollTop + containerHeight);
				const visibleRatio = Math.max(0, visibleBottom - visibleTop) / elementHeight;
				if (visibleRatio > maxVisibleRatio) {
					maxVisibleRatio = visibleRatio;
					activeOption = option;
				}
			}
		}
		if (activeOption && tab !== activeOption.id) onChange === null || onChange === void 0 || onChange(activeOption.id);
	}, { wait: 100 }).run;
	useEffect(() => {
		const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
		if (!container) return;
		container.addEventListener("scroll", handleContentScroll);
		return () => container.removeEventListener("scroll", handleContentScroll);
	}, [handleContentScroll]);
	const handleOptionClick = (item) => {
		onChange === null || onChange === void 0 || onChange(item.id);
		onTabClick === null || onTabClick === void 0 || onTabClick();
		if (document.querySelector(`[data-section="${item.id}"]`) instanceof HTMLElement && (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
			isClickScrolling.current = true;
			let scrollDistance = 0;
			for (const option of options) {
				if (option.id === item.id) break;
				const element = document.querySelector(`[data-section="${option.id}"]`);
				if (element instanceof HTMLElement) scrollDistance += element.offsetHeight;
			}
			containerRef.current.scrollTo({
				top: scrollDistance,
				behavior: "smooth"
			});
			setTimeout(() => {
				isClickScrolling.current = false;
			}, 1e3);
		}
	};
	const handlePageChange = (type) => {
		if (contentRef.current) {
			const { scrollLeft, clientWidth } = contentRef.current;
			contentRef.current.scrollTo({
				left: scrollLeft + (type === "left" ? -clientWidth : clientWidth),
				behavior: "smooth"
			});
		}
	};
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-anchor-tabs", className),
		style
	}, showButtons && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-anchor-tabs-btn-left",
		style: { width: leftWidth },
		onClick: () => handlePageChange("left")
	}, /* @__PURE__ */ React.createElement(ChevronLeft, { className: "pisell-anchor-tabs-btn-icon" })), /* @__PURE__ */ React.createElement("div", {
		ref: contentRef,
		className: "pisell-anchor-tabs-content",
		onScroll: handleHorizontalScroll
	}, options.map((item) => /* @__PURE__ */ React.createElement("div", {
		key: item.id,
		className: classNames("pisell-anchor-tabs-tab", { "pisell-anchor-tabs-tab-active": tab === item.id }),
		onClick: () => handleOptionClick(item)
	}, /* @__PURE__ */ React.createElement("span", { className: "pisell-anchor-tabs-tab-content" }, item.name)))), showButtons && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-anchor-tabs-btn-right",
		style: { width: rightWidth },
		onClick: () => handlePageChange("right")
	}, /* @__PURE__ */ React.createElement(ChevronRight, { className: "pisell-anchor-tabs-btn-icon" })));
};
//#endregion
export { PisellAnchor as default };
