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

//# sourceMappingURL=SliderRangeTriple.vue2.js.map