"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const index$1 = require("../../../../node_modules/@vueuse/core/index.js");
const error = require("../../../utils/error.js");
const index = require("../../../hooks/use-namespace/index.js");
const util = require("./util.js");
const thumb = require("./thumb.js");
const constants = require("./constants.js");
const Vue = require("vue");
const index$2 = require("../../../../node_modules/@vueuse/shared/index.js");
const COMPONENT_NAME = "Thumb";
var thumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  __name: "thumb",
  props: thumb.thumbProps,
  setup(__props) {
    const props = __props;
    const scrollbar = Vue.inject(constants.scrollbarContextKey);
    const ns = index.useNamespace("scrollbar");
    if (!scrollbar) error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
    const instance = Vue.ref();
    const thumb2 = Vue.ref();
    const thumbState = Vue.ref({});
    const visible = Vue.ref(false);
    let cursorDown = false;
    let cursorLeave = false;
    let baseScrollHeight = 0;
    let baseScrollWidth = 0;
    let originalOnSelectStart = index$2.isClient ? document.onselectstart : null;
    const bar = Vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
    const thumbStyle = Vue.computed(() => util.renderThumbStyle({
      size: props.size,
      move: props.move,
      bar: bar.value
    }));
    const offsetRatio = Vue.computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb2.value[bar.value.offset]);
    const clickThumbHandler = (e) => {
      var _a;
      e.stopPropagation();
      if (e.ctrlKey || [1, 2].includes(e.button)) return;
      (_a = window.getSelection()) == null ? void 0 : _a.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 (!thumb2.value || !instance.value || !scrollbar.wrapElement) return;
      const thumbPositionPercentage = (Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) - thumb2.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 || !thumb2.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 - (thumb2.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;
    };
    Vue.onBeforeUnmount(() => {
      restoreOnselectstart();
      document.removeEventListener("mouseup", mouseUpDocumentHandler);
    });
    const restoreOnselectstart = () => {
      if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
    };
    index$1.useEventListener(Vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
    index$1.useEventListener(Vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createBlock(Vue.Transition, {
        name: Vue.unref(ns).b("fade"),
        persisted: ""
      }, {
        default: Vue.withCtx(() => [Vue.withDirectives(Vue.createElementVNode("div", {
          ref_key: "instance",
          ref: instance,
          class: Vue.normalizeClass([Vue.unref(ns).e("bar"), Vue.unref(ns).is(bar.value.key)]),
          onMousedown: clickTrackHandler,
          onClick: _cache[0] || (_cache[0] = Vue.withModifiers(() => {
          }, ["stop"]))
        }, [Vue.createElementVNode("div", {
          ref_key: "thumb",
          ref: thumb2,
          class: Vue.normalizeClass(Vue.unref(ns).e("thumb")),
          style: Vue.normalizeStyle(thumbStyle.value),
          onMousedown: clickThumbHandler
        }, null, 38)], 34), [[Vue.vShow, __props.always || visible.value]])]),
        _: 1
      }, 8, ["name"]);
    };
  }
});
exports.default = thumb_vue_vue_type_script_setup_true_lang_default;
