import { defineComponent, createVNode } from 'vue';
import '../../../../utils/index.mjs';
import VcHandle from '../Handle.mjs';
import { isEventFromHandle, getHandleCenterPosition, getMousePosition, isNotTouchEvent, getTouchPosition, pauseEvent } from '../utils.mjs';
import Marks from './Marks.mjs';
import Steps from './Steps.mjs';
import PropTypes from '../../../../utils/vue/vueTypes.mjs';
import BaseMixin from '../../../../utils/vue/BaseMixin.mjs';
import { initDefaultProps } from '../../../../utils/vue/initDefaultProps.mjs';
import { devWarning } from '../../../../utils/log.mjs';
import { addEventListenerWrap } from '../../../../utils/event/addEventListener.mjs';
import { classNames } from '../../../../utils/dom/class.mjs';
import { supportsPassive } from '../../../../utils/event/supportsPassive.mjs';
import { getSlot } from '../../../../utils/vue/props.mjs';

function noop() {
}
function createSlider(Component) {
  const propTypes = {
    id: String,
    min: Number,
    max: Number,
    step: Number,
    marks: PropTypes.object,
    included: {
      type: Boolean,
      default: void 0
    },
    prefixCls: String,
    disabled: {
      type: Boolean,
      default: void 0
    },
    handle: Function,
    dots: {
      type: Boolean,
      default: void 0
    },
    vertical: {
      type: Boolean,
      default: void 0
    },
    reverse: {
      type: Boolean,
      default: void 0
    },
    minimumTrackStyle: PropTypes.object,
    // just for compatibility, will be deperecate
    maximumTrackStyle: PropTypes.object,
    // just for compatibility, will be deperecate
    handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
    trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
    railStyle: PropTypes.object,
    dotStyle: PropTypes.object,
    activeDotStyle: PropTypes.object,
    autofocus: {
      type: Boolean,
      default: void 0
    },
    draggableTrack: {
      type: Boolean,
      default: void 0
    }
  };
  return /* @__PURE__ */ defineComponent({
    compatConfig: {
      MODE: 3
    },
    name: "CreateSlider",
    mixins: [BaseMixin, Component],
    inheritAttrs: false,
    props: initDefaultProps(propTypes, {
      prefixCls: "rc-slider",
      min: 0,
      max: 100,
      step: 1,
      marks: {},
      included: true,
      disabled: false,
      dots: false,
      vertical: false,
      reverse: false,
      trackStyle: [{}],
      handleStyle: [{}],
      railStyle: {},
      dotStyle: {},
      activeDotStyle: {}
    }),
    emits: ["change", "blur", "focus"],
    data() {
      const {
        step,
        max,
        min
      } = this;
      const isPointDiffEven = Number.isFinite(max - min) ? (max - min) % step === 0 : true;
      devWarning(step && Math.floor(step) === step ? isPointDiffEven : true, `Slider[max] - Slider[min] (${max - min}) should be a multiple of Slider[step] (${step})`);
      this.handlesRefs = {};
      return {};
    },
    mounted() {
      this.$nextTick(() => {
        this.document = this.sliderRef && this.sliderRef.ownerDocument;
        const {
          autofocus,
          disabled
        } = this;
        if (autofocus && !disabled)
          this.focus();
      });
    },
    beforeUnmount() {
      this.$nextTick(() => {
        this.removeDocumentEvents();
      });
    },
    methods: {
      defaultHandle({
        index,
        directives,
        className,
        style,
        ...restProps
      }) {
        delete restProps.dragging;
        if (restProps.value === null)
          return null;
        const handleProps = {
          ...restProps,
          class: className,
          style,
          key: index
        };
        return createVNode(VcHandle, handleProps, null);
      },
      onDown(e, position) {
        let p = position;
        const {
          draggableTrack,
          vertical: isVertical
        } = this.$props;
        const {
          bounds
        } = this.$data;
        const value = draggableTrack && this.positionGetValue ? this.positionGetValue(p) || [] : [];
        const inPoint = isEventFromHandle(e, this.handlesRefs);
        this.dragTrack = draggableTrack && bounds.length >= 2 && !inPoint && !value.map((n, i) => {
          const v = !i ? n >= bounds[i] : true;
          return i === value.length - 1 ? n <= bounds[i] : v;
        }).some((c) => !c);
        if (this.dragTrack) {
          this.dragOffset = p;
          this.startBounds = [...bounds];
        } else {
          if (!inPoint) {
            this.dragOffset = 0;
          } else {
            const handlePosition = getHandleCenterPosition(isVertical, e.target);
            this.dragOffset = p - handlePosition;
            p = handlePosition;
          }
          this.onStart(p);
        }
      },
      onMouseDown(e) {
        if (e.button !== 0)
          return;
        this.removeDocumentEvents();
        const isVertical = this.$props.vertical;
        const position = getMousePosition(isVertical, e);
        this.onDown(e, position);
        this.addDocumentMouseEvents();
      },
      onTouchStart(e) {
        if (isNotTouchEvent(e))
          return;
        const isVertical = this.vertical;
        const position = getTouchPosition(isVertical, e);
        this.onDown(e, position);
        this.addDocumentTouchEvents();
        pauseEvent(e);
      },
      onFocus(e) {
        const {
          vertical
        } = this;
        if (isEventFromHandle(e, this.handlesRefs) && !this.dragTrack) {
          const handlePosition = getHandleCenterPosition(vertical, e.target);
          this.dragOffset = 0;
          this.onStart(handlePosition);
          pauseEvent(e);
          this.$emit("focus", e);
        }
      },
      onBlur(e) {
        if (!this.dragTrack)
          this.onEnd();
        this.$emit("blur", e);
      },
      onMouseUp() {
        if (this.handlesRefs[this.prevMovedHandleIndex])
          this.handlesRefs[this.prevMovedHandleIndex].clickFocus();
      },
      onMouseMove(e) {
        if (!this.sliderRef) {
          this.onEnd();
          return;
        }
        const position = getMousePosition(this.vertical, e);
        this.onMove(e, position - this.dragOffset, this.dragTrack, this.startBounds);
      },
      onTouchMove(e) {
        if (isNotTouchEvent(e) || !this.sliderRef) {
          this.onEnd();
          return;
        }
        const position = getTouchPosition(this.vertical, e);
        this.onMove(e, position - this.dragOffset, this.dragTrack, this.startBounds);
      },
      onKeyDown(e) {
        if (this.sliderRef && isEventFromHandle(e, this.handlesRefs))
          this.onKeyboard(e);
      },
      onClickMarkLabel(e, value) {
        e.stopPropagation();
        this.onChange({
          sValue: value
        });
        this.setState({
          sValue: value
        }, () => this.onEnd(true));
      },
      getSliderStart() {
        const slider = this.sliderRef;
        const {
          vertical,
          reverse
        } = this;
        const rect = slider.getBoundingClientRect();
        if (vertical)
          return reverse ? rect.bottom : rect.top;
        return window.pageXOffset + (reverse ? rect.right : rect.left);
      },
      getSliderLength() {
        const slider = this.sliderRef;
        if (!slider)
          return 0;
        const coords = slider.getBoundingClientRect();
        return this.vertical ? coords.height : coords.width;
      },
      addDocumentTouchEvents() {
        this.onTouchMoveListener = addEventListenerWrap(this.document, "touchmove", this.onTouchMove);
        this.onTouchUpListener = addEventListenerWrap(this.document, "touchend", this.onEnd);
      },
      addDocumentMouseEvents() {
        this.onMouseMoveListener = addEventListenerWrap(this.document, "mousemove", this.onMouseMove);
        this.onMouseUpListener = addEventListenerWrap(this.document, "mouseup", this.onEnd);
      },
      removeDocumentEvents() {
        this.onTouchMoveListener && this.onTouchMoveListener.remove();
        this.onTouchUpListener && this.onTouchUpListener.remove();
        this.onMouseMoveListener && this.onMouseMoveListener.remove();
        this.onMouseUpListener && this.onMouseUpListener.remove();
      },
      focus() {
        var _a;
        if (this.$props.disabled)
          return;
        (_a = this.handlesRefs[0]) == null ? void 0 : _a.focus();
      },
      blur() {
        if (this.$props.disabled)
          return;
        Object.keys(this.handlesRefs).forEach((key) => {
          var _a, _b;
          (_b = (_a = this.handlesRefs[key]) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
        });
      },
      calcValue(offset) {
        const {
          vertical,
          min,
          max
        } = this;
        const ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
        const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
        return value;
      },
      calcValueByPos(position) {
        const sign = this.reverse ? -1 : 1;
        const pixelOffset = sign * (position - this.getSliderStart());
        const nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
        return nextValue;
      },
      calcOffset(value) {
        const {
          min,
          max
        } = this;
        const ratio = (value - min) / (max - min);
        return Math.max(0, ratio * 100);
      },
      saveSlider(slider) {
        this.sliderRef = slider;
      },
      saveHandle(index, handle) {
        this.handlesRefs[index] = handle;
      }
    },
    render() {
      const {
        prefixCls,
        marks,
        dots,
        step,
        included,
        disabled,
        vertical,
        reverse,
        min,
        max,
        maximumTrackStyle,
        railStyle,
        dotStyle,
        activeDotStyle,
        id
      } = this;
      const {
        class: className,
        style
      } = this.$attrs;
      const {
        tracks,
        handles
      } = this.renderSlider();
      const sliderClassName = classNames(prefixCls, className, {
        [`${prefixCls}-with-marks`]: Object.keys(marks).length,
        [`${prefixCls}-disabled`]: disabled,
        [`${prefixCls}-vertical`]: vertical,
        [`${prefixCls}-horizontal`]: !vertical
      });
      const markProps = {
        vertical,
        marks,
        included,
        lowerBound: this.getLowerBound(),
        upperBound: this.getUpperBound(),
        max,
        min,
        reverse,
        class: `${prefixCls}-mark`,
        onClickLabel: disabled ? noop : this.onClickMarkLabel
      };
      const touchEvents = {
        [supportsPassive ? "onTouchstartPassive" : "onTouchstart"]: disabled ? noop : this.onTouchStart
      };
      return createVNode("div", {
        "id": id,
        "ref": this.saveSlider,
        "tabindex": "-1",
        "class": sliderClassName,
        ...touchEvents,
        "onMousedown": disabled ? noop : this.onMouseDown,
        "onMouseup": disabled ? noop : this.onMouseUp,
        "onKeydown": disabled ? noop : this.onKeyDown,
        "onFocus": disabled ? noop : this.onFocus,
        "onBlur": disabled ? noop : this.onBlur,
        "style": style
      }, [createVNode("div", {
        "class": `${prefixCls}-rail`,
        "style": {
          ...maximumTrackStyle,
          ...railStyle
        }
      }, null), tracks, createVNode(Steps, {
        "prefixCls": prefixCls,
        "vertical": vertical,
        "reverse": reverse,
        "marks": marks,
        "dots": dots,
        "step": step,
        "included": included,
        "lowerBound": this.getLowerBound(),
        "upperBound": this.getUpperBound(),
        "max": max,
        "min": min,
        "dotStyle": dotStyle,
        "activeDotStyle": activeDotStyle
      }, null), handles, createVNode(Marks, markProps, {
        mark: this.$slots.mark
      }), getSlot(this)]);
    }
  });
}

export { createSlider as default };
//# sourceMappingURL=createSlider.mjs.map
