import { defineComponent as T, useSlots as W, reactive as X, ref as d, computed as a, watch as Y, createElementBlock as m, openBlock as u, normalizeClass as N, createElementVNode as s, createCommentVNode as c, createBlock as $, toDisplayString as A, unref as b, withCtx as Z, renderSlot as ee, normalizeStyle as y, Fragment as te, renderList as le } from "vue";
import { useMouseCapture as K } from "../composition/useMouseCapture.js";
import { tapIf as U } from "../helpers/functions.js";
import { clamp as p } from "../helpers/math.js";
import oe from "./PlTooltip/PlTooltip.vue.js";
import se from "./InputRange.vue.js";
import { useSliderBreakpoints as ae } from "../composition/useSliderBreakpoints.js";
import { getErrorMessage as re } from "../helpers/error.js";
const ie = { class: "ui-slider__wrapper" }, ue = { class: "ui-slider__label-section" }, ne = {
  key: 0,
  class: "text-s"
}, de = {
  key: 1,
  class: "ui-slider__value-static text-s"
}, me = { class: "ui-slider__base" }, ce = { class: "ui-slider__container" }, pe = { class: "ui-slider__container ui-slider__container-thumb" }, fe = { class: "ui-slider__input-wrapper d-flex" }, ve = {
  key: 0,
  class: "ui-slider__error"
}, ke = /* @__PURE__ */ T({
  __name: "SliderRange",
  props: {
    modelValue: {},
    min: { default: 0 },
    max: {},
    step: { default: 1 },
    label: { default: void 0 },
    helper: { default: void 0 },
    error: { default: void 0 },
    mode: { default: "text" },
    measure: { default: "" },
    breakpoints: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue"],
  setup(z, { emit: F }) {
    const I = W(), P = F, e = z, i = X({
      deltaValue1: 0,
      deltaValue2: 0
    }), g = d(), M = d(), S = d(), f = d(e.modelValue), v = d(e.modelValue[0]), _ = d(e.modelValue[1]), j = a(() => e), O = ae(j), q = a(() => [v.value, _.value].sort((t, l) => t - l).join("-")), h = a(() => e.max - e.min), x = a(() => p((e.modelValue[0] ?? 0) + i.deltaValue1, e.min, e.max)), w = a(() => p((e.modelValue[1] ?? 0) + i.deltaValue2, e.min, e.max)), B = a(() => {
      const t = e.modelValue;
      return Array.isArray(t) && t.length === 2 && t.every((o) => Number.isFinite(o)) ? re(e.error) : "Expected model [number, number]";
    }), C = a(() => (x.value - e.min) / h.value), D = a(() => (w.value - e.min) / h.value), E = a(() => Q()), G = a(() => ({
      right: E.value[0] + "%",
      left: 100 - E.value[1] + "%"
    })), H = a(() => ({
      right: Math.ceil((1 - C.value) * 100) + "%"
    })), J = a(() => ({
      right: Math.ceil((1 - D.value) * 100) + "%"
    }));
    Y(
      () => e.modelValue,
      (t) => {
        f.value = t, v.value = +t[0], _.value = +t[1];
      },
      { immediate: !0 }
    ), K(M, (t) => {
      var l;
      U((l = b(g)) == null ? void 0 : l.getBoundingClientRect(), (o) => {
        const { dx: r } = t;
        i.deltaValue1 = r / o.width * h.value, v.value = n(p((e.modelValue[0] ?? 0) + i.deltaValue1, e.min, e.max)), f.value = [v.value, _.value].sort((k, R) => k - R), t.stop && (V([n(x.value), n(w.value)]), i.deltaValue1 = 0);
      });
    }), K(S, (t) => {
      var l;
      U((l = b(g)) == null ? void 0 : l.getBoundingClientRect(), (o) => {
        const { dx: r } = t;
        i.deltaValue2 = r / o.width * h.value, _.value = n(p((e.modelValue[1] ?? 0) + i.deltaValue2, e.min, e.max)), f.value = [v.value, _.value].sort((k, R) => k - R), t.stop && (V([n(x.value), n(w.value)]), i.deltaValue2 = 0);
      });
    });
    function Q() {
      const t = Math.ceil((1 - C.value) * 100), l = Math.ceil((1 - D.value) * 100);
      return [t, l].sort((o, r) => o - r);
    }
    function n(t) {
      const l = p(t, e.min, e.max);
      return Math.round((l + Number.EPSILON) * (1 / e.step)) / (1 / e.step);
    }
    function V(t) {
      P("update:modelValue", t);
    }
    function L(t, l) {
      ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Enter"].includes(t.code) && t.preventDefault();
      const o = t.code === "ArrowUp" || t.code === "ArrowRight" ? e.step * 1 : t.code === "ArrowDown" || t.code === "ArrowLeft" ? e.step * -1 : 0, r = [...e.modelValue];
      r[l] = p(r[l] + o, e.min, e.max), V(r);
    }
    return (t, l) => (u(), m("div", {
      class: N([e.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"])
    }, [
      s("div", {
        class: N([`ui-slider__mode-${e.mode}`, "ui-slider"])
      }, [
        s("div", ie, [
          s("div", ue, [
            t.label ? (u(), m("label", ne, [
              s("span", null, A(t.label), 1),
              b(I).tooltip ? (u(), $(b(oe), {
                key: 0,
                class: "info",
                position: "top"
              }, {
                tooltip: Z(() => [
                  ee(t.$slots, "tooltip")
                ]),
                _: 3
              })) : c("", !0)
            ])) : c("", !0),
            e.mode === "text" ? (u(), m("div", de, A(q.value), 1)) : c("", !0)
          ]),
          s("div", me, [
            s("div", ce, [
              s("div", {
                ref_key: "barRef",
                ref: g,
                class: "ui-slider__bar"
              }, [
                s("div", {
                  class: "ui-slider__progress",
                  style: y(G.value)
                }, null, 4)
              ], 512)
            ]),
            s("div", pe, [
              e.breakpoints ? (u(!0), m(te, { key: 0 }, le(b(O), (o, r) => (u(), m("div", {
                key: r,
                style: y({ right: `${o}%` }),
                class: "ui-slider__thumb-step"
              }, null, 4))), 128)) : c("", !0),
              s("div", {
                ref_key: "thumbRef1",
                ref: M,
                style: y(H.value),
                class: "ui-slider__thumb",
                tabindex: "0",
                onKeydown: l[0] || (l[0] = (o) => L(o, 0))
              }, l[3] || (l[3] = [
                s("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)
              ]), 36),
              s("div", {
                ref_key: "thumbRef2",
                ref: S,
                style: y(J.value),
                class: "ui-slider__thumb",
                tabindex: "0",
                onKeydown: l[1] || (l[1] = (o) => L(o, 1))
              }, l[4] || (l[4] = [
                s("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)
              ]), 36)
            ])
          ])
        ]),
        s("div", fe, [
          e.mode === "input" ? (u(), $(se, {
            key: 0,
            modelValue: f.value,
            "onUpdate:modelValue": l[2] || (l[2] = (o) => f.value = o),
            class: "ui-focused-border",
            onChange: V
          }, null, 8, ["modelValue"])) : c("", !0)
        ])
      ], 2),
      B.value ? (u(), m("div", ve, A(B.value), 1)) : c("", !0)
    ], 2));
  }
});
export {
  ke as default
};
//# sourceMappingURL=SliderRange.vue.js.map
