"use client";
import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
import { useScrollAreaContext } from "../ScrollArea.context.mjs";
import { getThumbRatio } from "../utils/get-thumb-ratio.mjs";
import { getThumbOffsetFromScroll } from "../utils/get-thumb-offset-from-scroll.mjs";
import { getScrollPositionFromPointer } from "../utils/get-scroll-position-from-pointer.mjs";
import { ScrollAreaScrollbarX } from "./ScrollbarX.mjs";
import { ScrollAreaScrollbarY } from "./ScrollbarY.mjs";
import { useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.tsx
function ScrollAreaScrollbarVisible(props) {
	const { orientation = "vertical", ...scrollbarProps } = props;
	const { dir } = useDirection();
	const context = useScrollAreaContext();
	const thumbRef = useRef(null);
	const pointerOffsetRef = useRef(0);
	const [sizes, setSizes] = useState({
		content: 0,
		viewport: 0,
		scrollbar: {
			size: 0,
			paddingStart: 0,
			paddingEnd: 0
		}
	});
	const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
	const commonProps = {
		...scrollbarProps,
		sizes,
		onSizesChange: setSizes,
		hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
		onThumbChange: (thumb) => {
			thumbRef.current = thumb;
		},
		onThumbPointerUp: () => {
			pointerOffsetRef.current = 0;
		},
		onThumbPointerDown: (pointerPos) => {
			pointerOffsetRef.current = pointerPos;
		}
	};
	const getScrollPosition = (pointerPos, direction) => getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, direction);
	if (orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollAreaScrollbarX, {
		...commonProps,
		onThumbPositionChange: () => {
			if (context.viewport && thumbRef.current) {
				const scrollPos = context.viewport.scrollLeft;
				const offset = getThumbOffsetFromScroll(scrollPos, sizes, dir);
				thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
			}
		},
		onWheelScroll: (scrollPos) => {
			if (context.viewport) context.viewport.scrollLeft = scrollPos;
		},
		onDragScroll: (pointerPos) => {
			if (context.viewport) context.viewport.scrollLeft = getScrollPosition(pointerPos, dir);
		}
	});
	if (orientation === "vertical") return /* @__PURE__ */ jsx(ScrollAreaScrollbarY, {
		...commonProps,
		onThumbPositionChange: () => {
			if (context.viewport && thumbRef.current) {
				const scrollPos = context.viewport.scrollTop;
				const offset = getThumbOffsetFromScroll(scrollPos, sizes);
				if (sizes.scrollbar.size === 0) thumbRef.current.style.setProperty("--thumb-opacity", "0");
				else thumbRef.current.style.setProperty("--thumb-opacity", "1");
				thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
			}
		},
		onWheelScroll: (scrollPos) => {
			if (context.viewport) context.viewport.scrollTop = scrollPos;
		},
		onDragScroll: (pointerPos) => {
			if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
		}
	});
	return null;
}
ScrollAreaScrollbarVisible.displayName = "@mantine/core/ScrollAreaScrollbarVisible";
//#endregion
export { ScrollAreaScrollbarVisible };

//# sourceMappingURL=ScrollAreaScrollbarVisible.mjs.map