import { defineComponent, ref, watch, computed, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass } from "vue";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Slider",
  props: {
    modelValue: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const value = ref(props.modelValue);
    const thumb = ref(null);
    const slider = ref(null);
    const track = ref(null);
    watch(value, (newValue) => {
      emit("update:modelValue", newValue);
    });
    watch(
      () => props.modelValue,
      (newValue) => {
        value.value = newValue;
      }
    );
    const valuePercentage = computed(() => {
      return (value.value - props.min) / (props.max - props.min) * 100;
    });
    const thumbStyle = computed(() => {
      return {
        left: `${valuePercentage.value}%`
      };
    });
    function handleMousedown(event) {
      var _a;
      if (props.disabled) return;
      (_a = thumb.value) == null ? void 0 : _a.classList.add("slider-thumb-active");
      handleMousemove(event);
    }
    function handleMousemove(event) {
      var _a, _b;
      if (props.disabled || !((_a = thumb.value) == null ? void 0 : _a.classList.contains("slider-thumb-active")))
        return;
      const sliderRect = (_b = slider.value) == null ? void 0 : _b.getBoundingClientRect();
      if (sliderRect) {
        const newValue = (event.clientX - sliderRect.left) / sliderRect.width * (props.max - props.min) + props.min;
        const steppedValue = Math.round(newValue / props.step) * props.step;
        const clampedValue = Math.min(Math.max(steppedValue, props.min), props.max);
        value.value = clampedValue;
      }
    }
    function handleMouseup() {
      var _a;
      if (props.disabled) return;
      (_a = thumb.value) == null ? void 0 : _a.classList.remove("slider-thumb-active");
    }
    onMounted(() => {
      document.addEventListener("mousemove", handleMousemove);
      document.addEventListener("mouseup", handleMouseup);
    });
    onUnmounted(() => {
      document.removeEventListener("mousemove", handleMousemove);
      document.removeEventListener("mouseup", handleMouseup);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "slider",
        ref_key: "slider",
        ref: slider,
        onMousedown: handleMousedown
      }, [
        createElementVNode("div", {
          class: "slider-track",
          ref_key: "track",
          ref: track,
          style: normalizeStyle({ width: valuePercentage.value + "%" })
        }, null, 4),
        createElementVNode("div", {
          class: normalizeClass(["slider-thumb", { "slider-thumb-disabled": __props.disabled }]),
          ref_key: "thumb",
          ref: thumb,
          style: normalizeStyle(thumbStyle.value)
        }, null, 6)
      ], 544);
    };
  }
});
export {
  _sfc_main as default
};
