import { useCssVars as Se, ref as d, computed as s, watch as A, onMounted as we, onBeforeUnmount as ke, openBlock as m, createElementBlock as h, createElementVNode as u, normalizeStyle as y, createVNode as Ne, renderSlot as Ce, createCommentVNode as b, unref as Me, Fragment as G, renderList as Z, normalizeClass as F, withDirectives as q, vModelText as Q, toDisplayString as J, pushScopeId as $e, popScopeId as Ee } from "vue";
import Le from "./BaseIcon-CgOl0yXt.js";
import { t as Re, u as De } from "./useResponsive-CoxXLe23.js";
import { c as Pe, R as K, Q as Y, X as ze } from "./index-MWHrTFPq.js";
import { _ as Ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const _ = (l) => ($e("data-v-c027bcce"), l = l(), Ee(), l), Be = {
  class: "vue-data-ui-slicer-labels",
  style: { position: "relative", "z-index": "1", "pointer-events": "none" }
}, Ae = {
  key: 0,
  style: { width: "100%", position: "relative" }
}, Fe = {
  key: 0,
  class: "minimap",
  style: { width: "100%" }
}, Te = ["xmlns", "viewBox"], Ve = ["id"], He = ["stop-color"], Xe = /* @__PURE__ */ _(() => /* @__PURE__ */ u("stop", {
  offset: "100%",
  "stop-color": "transparent"
}, null, -1)), We = ["d", "stroke"], Oe = ["x", "width", "height", "fill", "rx"], Ue = ["d", "fill"], je = ["x", "width", "height", "rx", "fill"], Ge = ["x", "width", "height", "fill", "rx"], Ze = ["d", "fill"], qe = ["d", "stroke"], Qe = ["cx", "cy", "stroke", "fill"], Je = ["cx", "cy", "stroke", "fill"], Ke = ["x1", "x2", "y2", "stroke"], Ye = ["x", "height", "width", "onMouseenter"], _e = /* @__PURE__ */ _(() => /* @__PURE__ */ u("div", { class: "slider-track" }, null, -1)), et = ["min", "max"], tt = ["min", "max"], lt = {
  __name: "Slicer",
  props: {
    background: {
      type: String,
      default: "#FFFFFF"
    },
    borderColor: {
      type: String,
      default: "#FFFFFF"
    },
    fontSize: {
      type: Number,
      default: 14
    },
    labelLeft: {
      type: String,
      default: ""
    },
    labelRight: {
      type: String,
      default: ""
    },
    textColor: {
      type: String,
      default: "#1A1A1A"
    },
    inputColor: {
      type: String,
      default: "#1A1A1A"
    },
    max: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    selectColor: {
      type: String,
      default: "#4A4A4A"
    },
    useResetSlot: {
      type: Boolean,
      default: !1
    },
    valueStart: {
      type: [Number, String],
      default: 0
    },
    valueEnd: {
      type: [Number, String],
      default: 0
    },
    minimap: {
      type: Array,
      default: []
    },
    smoothMinimap: {
      type: Boolean,
      default: !1
    },
    minimapSelectedColor: {
      type: String,
      default: "#1f77b4"
    },
    minimapSelectionRadius: {
      type: Number,
      default: 12
    },
    minimapLineColor: {
      type: String,
      default: "#2D353C"
    },
    minimapSelectedColorOpacity: {
      type: Number,
      default: 0.2
    },
    minimapSelectedIndex: {
      type: Number,
      default: null
    },
    minimapIndicatorColor: {
      type: String,
      default: "#2D353C"
    },
    refreshStartPoint: {
      type: Number,
      default: 0
    },
    refreshEndPoint: {
      type: Number,
      default: null
    },
    enableRangeHandles: {
      type: Boolean,
      default: !1
    },
    enableSelectionDrag: {
      type: Boolean,
      default: !0
    },
    verticalHandles: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["update:start", "update:end", "reset", "trapMouse"],
  setup(l, { expose: ee, emit: p }) {
    const t = l;
    Se((e) => ({
      "0eeb34b8": ae.value,
      b23e85a8: w.value,
      "2203b99d": ie.value,
      f1d40348: l.selectColor,
      "27a84a2c": ne.value
    }));
    const S = d(null), o = d(t.min), r = d(t.max), x = s(() => !!t.minimap.length), M = d(Pe()), te = s(() => t.refreshEndPoint === null ? t.max : t.refreshEndPoint), le = s(() => {
      const e = t.max - t.min, a = (o.value - t.min) / e * 100, n = (r.value - t.min) / e * 100;
      return {
        left: `${a}%`,
        width: `${n - a}%`,
        background: t.selectColor
      };
    }), ae = s(() => t.inputColor), ne = s(() => t.background), ie = s(() => `${t.selectColor}33`), w = s(() => t.borderColor), T = s(() => {
      let e = [];
      for (let a = 0; a < t.minimap.length; a += 1)
        e.push(a);
      return e;
    });
    function V() {
      p("reset");
    }
    function ue() {
      Number(o.value) > Number(r.value) - 1 && (o.value = Number(r.value) - 1), p("update:start", Number(o.value));
    }
    function oe() {
      Number(r.value) < Number(o.value) + 1 && (r.value = Number(o.value) + 1), p("update:end", Number(r.value));
    }
    A(
      () => t.min,
      (e) => {
        Number(o.value) < Number(e) && (o.value = Number(e)), Number(r.value) < Number(e) && (r.value = Number(e));
      }
    ), A(
      () => t.max,
      (e) => {
        Number(o.value) > Number(e) && (o.value = Number(e)), Number(r.value) > Number(e) && (r.value = Number(e));
      }
    );
    const $ = d(null), i = d({
      width: 1,
      height: 1
    }), C = d(null);
    we(() => {
      if (x.value) {
        const e = Re(() => {
          const { width: a, height: n } = De({
            chart: $.value
          });
          i.value.width = a, i.value.height = n - 47;
        });
        C.value = new ResizeObserver(e), C.value.observe($.value);
      }
    }), ke(() => {
      C.value && C.value.disconnect();
    });
    const c = s(() => t.minimap.length ? i.value.width / t.minimap.length : 0), f = s(() => {
      if (!t.minimap.length) return [];
      const e = Math.max(...t.minimap), a = Math.min(...t.minimap) - 10, n = e - (a > 0 ? 0 : a), v = t.minimap.map((xe, ye) => {
        const be = xe - a;
        return {
          x: i.value.width / t.minimap.length * ye + c.value / 2,
          y: i.value.height - be / n * (i.value.height * 0.9)
        };
      }), N = t.smoothMinimap ? K(v) : Y(v), B = [...v].slice(t.valueStart, t.valueEnd), pe = t.smoothMinimap ? K(B) : Y(B);
      return {
        fullSet: N,
        selectionSet: pe,
        sliced: B,
        firstPlot: v[t.valueStart],
        lastPlot: v[t.valueEnd - 1]
      };
    }), g = s(() => ({
      x: c.value * o.value + c.value / 2,
      width: i.value.width * ((r.value - o.value) / t.max) - c.value
    })), re = s(() => ({
      left: 0,
      color: t.textColor,
      fontSize: `${t.fontSize}px`,
      top: x.value ? "28px" : "-28px",
      pointerEvents: "none"
    })), se = s(() => ({
      right: 0,
      color: t.textColor,
      fontSize: `${t.fontSize}px`,
      top: x.value ? "28px" : "-28px",
      direction: "rtl",
      pointerEvents: "none"
    })), k = d(t.minimapSelectedIndex);
    A(() => t.minimapSelectedIndex, (e) => {
      k.value = e + t.valueStart;
    }, { immediate: !0 });
    function de(e) {
      k.value = e, e >= t.valueStart && e < t.valueEnd && p("trapMouse", e - t.valueStart);
    }
    const ce = d(0), E = d(null), L = d(null);
    function R(e) {
      o.value = e, E.value && (E.value.value = e), p("update:start", Number(o.value));
    }
    function D(e) {
      r.value = e, L.value && (L.value.value = e), p("update:end", Number(r.value));
    }
    const P = s(() => t.valueEnd - t.valueStart), z = d(!1);
    let I = d(null);
    const ve = s(() => S.value ? (S.value.getBoundingClientRect().width - 48) / (t.max - t.min) : 20), me = s(() => (S.value.getBoundingClientRect().width - 48) / (t.max - t.min) * P.value), he = d(2.5), H = s(() => {
      const e = S.value.getBoundingClientRect().width - 48;
      return Math.ceil((t.max - t.min) / ((e - me.value) / he.value));
    }), X = (e) => {
      if (!t.enableSelectionDrag)
        return;
      const a = e.type === "touchstart";
      if ((a ? e.targetTouches[0].target : e.target).classList.contains("range-handle"))
        return;
      z.value = !0, I.value = a ? e.targetTouches[0].clientX : e.clientX;
      const v = a ? fe : W, N = a ? ge : U;
      window.addEventListener(a ? "touchmove" : "mousemove", v, { passive: !1 }), window.addEventListener(a ? "touchend" : "mouseup", N);
    };
    function W(e) {
      O(e.clientX);
    }
    function fe(e) {
      e.target.classList.contains("range-handle") || (e.preventDefault(), O(e.targetTouches[0].clientX));
    }
    function O(e) {
      if (!z.value) return;
      const a = e - I.value;
      if (Math.abs(a) > ve.value) {
        if (a > 0) {
          if (Number(r.value) + 1 <= t.max) {
            const n = Math.min(t.max, Number(r.value) + H.value);
            D(n), R(n - P.value);
          }
        } else if (Number(o.value) - 1 >= t.min) {
          const n = Math.max(0, Number(o.value) - H.value);
          R(n), D(n + P.value);
        }
        I.value = e;
      }
    }
    function U() {
      j("mousemove", "mouseup");
    }
    function ge() {
      j("touchmove", "touchend");
    }
    function j(e, a) {
      z.value = !1, window.removeEventListener(e, W), window.removeEventListener(a, U);
    }
    return ee({
      setStartValue: R,
      setEndValue: D
    }), (e, a) => (m(), h("div", {
      "data-html2canvas-ignore": "",
      style: { padding: "0 24px" },
      class: "vue-data-ui-zoom",
      ref_key: "zoomWrapper",
      ref: S,
      onMousedown: X,
      onTouchstart: X
    }, [
      u("div", Be, [
        l.valueStart !== l.refreshStartPoint || l.valueEnd !== te.value ? (m(), h("div", Ae, [
          l.useResetSlot ? Ce(e.$slots, "reset-action", {
            key: 1,
            reset: V
          }, void 0, !0) : (m(), h("button", {
            key: 0,
            "data-cy-reset": "",
            tabindex: "0",
            role: "button",
            class: "vue-data-ui-refresh-button",
            style: y({
              top: x.value ? "36px" : "-16px",
              pointerEvents: "all !important"
            }),
            onClick: V
          }, [
            Ne(Le, {
              name: "refresh",
              stroke: l.textColor
            }, null, 8, ["stroke"])
          ], 4))
        ])) : b("", !0)
      ]),
      u("div", {
        class: "double-range-slider",
        ref_key: "minimapWrapper",
        ref: $,
        style: { "z-index": "0" }
      }, [
        x.value ? (m(), h("div", Fe, [
          (m(), h("svg", {
            xmlns: Me(ze),
            viewBox: `0 0 ${i.value.width < 0 ? 0 : i.value.width} ${i.value.height < 0 ? 0 : i.value.height}`
          }, [
            u("defs", null, [
              u("linearGradient", {
                id: M.value,
                x1: "0%",
                y1: "0%",
                x2: "0%",
                y2: "100%"
              }, [
                u("stop", {
                  offset: "0%",
                  "stop-color": `${l.minimapLineColor}50`
                }, null, 8, He),
                Xe
              ], 8, Ve)
            ]),
            u("path", {
              d: `M${f.value.fullSet}`,
              stroke: `${l.minimapLineColor}`,
              fill: "none",
              "stroke-width": "1",
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              style: { opacity: "1" }
            }, null, 8, We),
            u("rect", {
              x: g.value.x,
              width: g.value.width < 0 ? 0 : g.value.width,
              height: Math.max(i.value.height, 0),
              y: 0,
              fill: w.value,
              rx: l.minimapSelectionRadius,
              stroke: "none"
            }, null, 8, Oe),
            u("path", {
              d: `M${c.value / 2},${Math.max(i.value.height, 0)} ${f.value.fullSet} L${i.value.width - c.value / 2},${Math.max(i.value.height, 0)}Z`,
              fill: `url(#${M.value})`,
              stroke: "none",
              style: { opacity: "1" }
            }, null, 8, Ue),
            u("rect", {
              x: g.value.x,
              width: g.value.width < 0 ? 0 : g.value.width,
              height: Math.max(i.value.height, 0),
              y: 0,
              rx: l.minimapSelectionRadius,
              fill: w.value
            }, null, 8, je),
            u("rect", {
              x: g.value.x,
              width: g.value.width < 0 ? 0 : g.value.width,
              height: Math.max(i.value.height, 0),
              y: 0,
              fill: l.minimapSelectedColor,
              rx: l.minimapSelectionRadius,
              style: y({
                opacity: l.minimapSelectedColorOpacity
              })
            }, null, 12, Ge),
            u("path", {
              d: `M${f.value.sliced[0].x},${Math.max(i.value.height, 0)} ${f.value.selectionSet} L${f.value.sliced.at(-1).x},${Math.max(i.value.height, 0)}Z`,
              fill: `url(#${M.value})`,
              stroke: "none",
              style: { opacity: "1" }
            }, null, 8, Ze),
            u("path", {
              d: `M ${f.value.selectionSet}`,
              stroke: `${l.minimapLineColor}`,
              fill: "transparent",
              "stroke-width": "2",
              "stroke-linecap": "round",
              "stroke-linejoin": "round"
            }, null, 8, qe),
            u("circle", {
              cx: f.value.firstPlot.x,
              cy: f.value.firstPlot.y,
              "stroke-width": "0.5",
              stroke: w.value,
              r: "3",
              fill: l.minimapLineColor
            }, null, 8, Qe),
            u("circle", {
              cx: f.value.lastPlot.x,
              cy: f.value.lastPlot.y,
              "stroke-width": "0.5",
              stroke: w.value,
              r: "3",
              fill: l.minimapLineColor
            }, null, 8, Je),
            k.value !== null ? (m(!0), h(G, { key: 0 }, Z(T.value, (n, v) => (m(), h("g", null, [
              k.value === n && n >= l.valueStart && n < l.valueEnd ? (m(), h("line", {
                key: 0,
                x1: c.value * v + c.value / 2,
                x2: c.value * v + c.value / 2,
                y1: 0,
                y2: Math.max(i.value.height, 0),
                stroke: l.minimapIndicatorColor,
                "stroke-linecap": "round",
                "stroke-dasharray": "2",
                "stroke-width": "1"
              }, null, 8, Ke)) : b("", !0)
            ]))), 256)) : b("", !0),
            (m(!0), h(G, null, Z(T.value, (n, v) => (m(), h("rect", {
              x: c.value * v,
              y: 0,
              height: Math.max(i.value.height, 0),
              width: c.value < 0 ? 0 : c.value,
              fill: "transparent",
              style: y([{ "pointer-events": "all !important" }, {
                cursor: n >= l.valueStart && n < l.valueEnd && l.enableSelectionDrag ? "move" : "default"
              }]),
              onMouseenter: (N) => de(n),
              onMouseleave: a[0] || (a[0] = (N) => {
                k.value = null, p("trapMouse", null);
              })
            }, null, 44, Ye))), 256))
          ], 8, Te))
        ])) : b("", !0),
        _e,
        u("div", {
          class: F({
            "range-highlight": !0,
            move: l.enableSelectionDrag
          }),
          style: y(le.value)
        }, null, 6),
        l.enableRangeHandles ? q((m(), h("input", {
          ref_key: "rangeStart",
          ref: E,
          key: `range-min${ce.value}`,
          type: "range",
          class: F({ "range-left": !0, "range-handle": !0, "range-minimap": x.value && l.verticalHandles }),
          min: l.min,
          max: l.max,
          "onUpdate:modelValue": a[1] || (a[1] = (n) => o.value = n),
          onInput: ue
        }, null, 42, et)), [
          [Q, o.value]
        ]) : b("", !0),
        u("div", {
          class: "thumb-label thumb-label-left",
          style: y(re.value)
        }, J(l.labelLeft), 5),
        l.enableRangeHandles ? q((m(), h("input", {
          key: 2,
          ref_key: "rangeEnd",
          ref: L,
          type: "range",
          class: F({ "range-right": !0, "range-handle": !0, "range-minimap": x.value && l.verticalHandles }),
          min: l.min,
          max: l.max,
          "onUpdate:modelValue": a[2] || (a[2] = (n) => r.value = n),
          onInput: oe
        }, null, 42, tt)), [
          [Q, r.value]
        ]) : b("", !0),
        u("div", {
          class: "thumb-label thumb-label-right",
          style: y(se.value)
        }, J(l.labelRight), 5)
      ], 512)
    ], 544));
  }
}, rt = /* @__PURE__ */ Ie(lt, [["__scopeId", "data-v-c027bcce"]]);
export {
  rt as S
};
