import { isClient as isClient$1 } from "../../../utils/browser.mjs";
import { throwError } from "../../../utils/error.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { BAR_MAP, renderThumbStyle } from "./util.mjs";
import { thumbProps } from "./thumb.mjs";
import { scrollbarContextKey } from "./constants.mjs";
import { useEventListener } from "@vueuse/core";
import { Transition, computed, createBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, toRef, unref, vShow, withCtx, withDirectives, withModifiers } from "vue";

//#region ../../packages/components/scrollbar/src/thumb.vue?vue&type=script&setup=true&lang.ts
const COMPONENT_NAME = "Thumb";
var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "thumb",
	props: thumbProps,
	setup(__props) {
		const props = __props;
		const scrollbar = inject(scrollbarContextKey);
		const ns = useNamespace("scrollbar");
		if (!scrollbar) throwError(COMPONENT_NAME, "can not inject scrollbar context");
		const instance = ref();
		const thumb = ref();
		const thumbState = ref({});
		const visible = ref(false);
		let cursorDown = false;
		let cursorLeave = false;
		let baseScrollHeight = 0;
		let baseScrollWidth = 0;
		let originalOnSelectStart = isClient$1 ? document.onselectstart : null;
		const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
		const thumbStyle = computed(() => renderThumbStyle({
			size: props.size,
			move: props.move,
			bar: bar.value
		}));
		const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
		const clickThumbHandler = (e) => {
			e.stopPropagation();
			if (e.ctrlKey || [1, 2].includes(e.button)) return;
			window.getSelection()?.removeAllRanges();
			startDrag(e);
			const el = e.currentTarget;
			if (!el) return;
			thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
		};
		const clickTrackHandler = (e) => {
			if (!thumb.value || !instance.value || !scrollbar.wrapElement) return;
			const thumbPositionPercentage = (Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) - thumb.value[bar.value.offset] / 2) * 100 * offsetRatio.value / instance.value[bar.value.offset];
			scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
		};
		const startDrag = (e) => {
			e.stopImmediatePropagation();
			cursorDown = true;
			baseScrollHeight = scrollbar.wrapElement.scrollHeight;
			baseScrollWidth = scrollbar.wrapElement.scrollWidth;
			document.addEventListener("mousemove", mouseMoveDocumentHandler);
			document.addEventListener("mouseup", mouseUpDocumentHandler);
			originalOnSelectStart = document.onselectstart;
			document.onselectstart = () => false;
		};
		const mouseMoveDocumentHandler = (e) => {
			if (!instance.value || !thumb.value) return;
			if (cursorDown === false) return;
			const prevPage = thumbState.value[bar.value.axis];
			if (!prevPage) return;
			const thumbPositionPercentage = ((instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1 - (thumb.value[bar.value.offset] - prevPage)) * 100 * offsetRatio.value / instance.value[bar.value.offset];
			if (bar.value.scroll === "scrollLeft") scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
			else scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
		};
		const mouseUpDocumentHandler = () => {
			cursorDown = false;
			thumbState.value[bar.value.axis] = 0;
			document.removeEventListener("mousemove", mouseMoveDocumentHandler);
			document.removeEventListener("mouseup", mouseUpDocumentHandler);
			restoreOnselectstart();
			if (cursorLeave) visible.value = false;
		};
		const mouseMoveScrollbarHandler = () => {
			cursorLeave = false;
			visible.value = !!props.size;
		};
		const mouseLeaveScrollbarHandler = () => {
			cursorLeave = true;
			visible.value = cursorDown;
		};
		onBeforeUnmount(() => {
			restoreOnselectstart();
			document.removeEventListener("mouseup", mouseUpDocumentHandler);
		});
		const restoreOnselectstart = () => {
			if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
		};
		useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
		useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(Transition, {
				name: unref(ns).b("fade"),
				persisted: ""
			}, {
				default: withCtx(() => [withDirectives(createElementVNode("div", {
					ref_key: "instance",
					ref: instance,
					class: normalizeClass([unref(ns).e("bar"), unref(ns).is(bar.value.key)]),
					onMousedown: clickTrackHandler,
					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
				}, [createElementVNode("div", {
					ref_key: "thumb",
					ref: thumb,
					class: normalizeClass(unref(ns).e("thumb")),
					style: normalizeStyle(thumbStyle.value),
					onMousedown: clickThumbHandler
				}, null, 38)], 34), [[vShow, __props.always || visible.value]])]),
				_: 1
			}, 8, ["name"]);
		};
	}
});

//#endregion
export { thumb_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=thumb.vue_vue_type_script_setup_true_lang.mjs.map