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