import { useCssVars as ie, ref as f, computed as d, watch as L, onMounted as oe, onBeforeUnmount as ue, openBlock as m, createElementBlock as v, createElementVNode as n, normalizeStyle as S, createVNode as re, renderSlot as se, createCommentVNode as N, unref as de, Fragment as F, renderList as R, withDirectives as V, vModelText as A, toDisplayString as B, pushScopeId as me, popScopeId as ve } from "vue";
import ce from "./BaseIcon-DpLJi6ci.js";
import { t as he, u as fe } from "./useResponsive-CoxXLe23.js";
import { c as pe, R as O, Q as D, X as xe } from "./index-Cm2_6s9o.js";
import { _ as ye } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const U = (l) => (me("data-v-cf67df9a"), l = l(), ve(), l), ge = {
  "data-html2canvas-ignore": "",
  style: { padding: "0 24px" },
  class: "vue-data-ui-zoom"
}, be = {
  class: "vue-data-ui-slicer-labels",
  style: { position: "relative", "z-index": "1", "pointer-events": "none" }
}, Se = {
  key: 0,
  style: { width: "100%", position: "relative" }
}, ke = {
  key: 0,
  class: "minimap",
  style: { width: "100%" }
}, Ne = ["xmlns", "viewBox"], Ce = ["id"], we = ["stop-color"], $e = /* @__PURE__ */ U(() => /* @__PURE__ */ n("stop", {
  offset: "100%",
  "stop-color": "transparent"
}, null, -1)), Me = ["d", "stroke"], Ee = ["x", "width", "height", "fill", "rx"], Pe = ["d", "fill"], Le = ["x", "width", "height", "rx", "fill"], Ie = ["x", "width", "height", "fill", "rx"], ze = ["d", "fill"], Fe = ["d", "stroke"], Re = ["cx", "cy", "stroke", "fill"], Ve = ["cx", "cy", "stroke", "fill"], Ae = ["x1", "x2", "y2", "stroke"], Be = ["x", "height", "width", "onMouseenter"], Oe = /* @__PURE__ */ U(() => /* @__PURE__ */ n("div", { class: "slider-track" }, null, -1)), De = ["min", "max"], Ue = ["min", "max"], Te = {
  __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
    }
  },
  emits: ["update:start", "update:end", "reset", "trapMouse"],
  setup(l, { expose: T, emit: x }) {
    const e = l;
    ie((t) => ({
      "3d3a2c02": _.value,
      79587273: g.value,
      "72fa1da4": Z.value,
      "598db3a3": l.selectColor,
      b4acd69e: j.value
    }));
    const o = f(e.min), u = f(e.max), y = d(() => !!e.minimap.length), C = f(pe()), W = d(() => e.refreshEndPoint === null ? e.max : e.refreshEndPoint), X = d(() => {
      const t = e.max - e.min, i = (o.value - e.min) / t * 100, r = (u.value - e.min) / t * 100;
      return {
        left: `${i}%`,
        width: `${r - i}%`,
        background: e.selectColor
      };
    }), _ = d(() => e.inputColor), j = d(() => e.background), Z = d(() => `${e.selectColor}33`), g = d(() => e.borderColor), I = d(() => {
      let t = [];
      for (let i = 0; i < e.minimap.length; i += 1)
        t.push(i);
      return t;
    });
    function z() {
      x("reset");
    }
    function q() {
      Number(o.value) > Number(u.value) - 1 && (o.value = Number(u.value) - 1), x("update:start", Number(o.value));
    }
    function G() {
      Number(u.value) < Number(o.value) + 1 && (u.value = Number(o.value) + 1), x("update:end", Number(u.value));
    }
    L(
      () => e.min,
      (t) => {
        Number(o.value) < Number(t) && (o.value = Number(t)), Number(u.value) < Number(t) && (u.value = Number(t));
      }
    ), L(
      () => e.max,
      (t) => {
        Number(o.value) > Number(t) && (o.value = Number(t)), Number(u.value) > Number(t) && (u.value = Number(t));
      }
    );
    const w = f(null), a = f({
      width: 1,
      height: 1
    }), k = f(null);
    oe(() => {
      if (y.value) {
        const t = he(() => {
          const { width: i, height: r } = fe({
            chart: w.value
          });
          a.value.width = i, a.value.height = r - 47;
        });
        k.value = new ResizeObserver(t), k.value.observe(w.value);
      }
    }), ue(() => {
      k.value && k.value.disconnect();
    });
    const s = d(() => e.minimap.length ? a.value.width / e.minimap.length : 0), c = d(() => {
      if (!e.minimap.length) return [];
      const t = Math.max(...e.minimap), i = Math.min(...e.minimap) - 10, r = t - (i > 0 ? 0 : i), h = e.minimap.map((le, ae) => {
        const ne = le - i;
        return {
          x: a.value.width / e.minimap.length * ae + s.value / 2,
          y: a.value.height - ne / r * (a.value.height * 0.9)
        };
      }), E = e.smoothMinimap ? O(h) : D(h), P = [...h].slice(e.valueStart, e.valueEnd), te = e.smoothMinimap ? O(P) : D(P);
      return {
        fullSet: E,
        selectionSet: te,
        sliced: P,
        firstPlot: h[e.valueStart],
        lastPlot: h[e.valueEnd - 1]
      };
    }), p = d(() => ({
      x: s.value * o.value + s.value / 2,
      width: a.value.width * ((u.value - o.value) / e.max) - s.value
    })), Q = d(() => ({
      left: 0,
      color: e.textColor,
      fontSize: `${e.fontSize}px`,
      top: y.value ? "28px" : "-28px",
      pointerEvents: "none"
    })), H = d(() => ({
      right: 0,
      color: e.textColor,
      fontSize: `${e.fontSize}px`,
      top: y.value ? "28px" : "-28px",
      direction: "rtl",
      pointerEvents: "none"
    })), b = f(e.minimapSelectedIndex);
    L(() => e.minimapSelectedIndex, (t) => {
      b.value = t + e.valueStart;
    }, { immediate: !0 });
    function J(t) {
      b.value = t, t >= e.valueStart && t < e.valueEnd && x("trapMouse", t - e.valueStart);
    }
    const K = f(0), $ = f(null), M = f(null);
    function Y(t) {
      o.value = t, $.value && ($.value.value = t), x("update:start", Number(o.value));
    }
    function ee(t) {
      u.value = t, M.value && (M.value.value = t), x("update:end", Number(u.value));
    }
    return T({
      setStartValue: Y,
      setEndValue: ee
    }), (t, i) => (m(), v("div", ge, [
      n("div", be, [
        l.valueStart !== l.refreshStartPoint || l.valueEnd !== W.value ? (m(), v("div", Se, [
          l.useResetSlot ? se(t.$slots, "reset-action", {
            key: 1,
            reset: z
          }, void 0, !0) : (m(), v("button", {
            key: 0,
            "data-cy-reset": "",
            tabindex: "0",
            role: "button",
            class: "vue-data-ui-refresh-button",
            style: S({
              top: y.value ? "36px" : "-16px",
              pointerEvents: "all !important"
            }),
            onClick: z
          }, [
            re(ce, {
              name: "refresh",
              stroke: l.textColor
            }, null, 8, ["stroke"])
          ], 4))
        ])) : N("", !0)
      ]),
      n("div", {
        class: "double-range-slider",
        ref_key: "minimapWrapper",
        ref: w,
        style: { "z-index": "0" }
      }, [
        y.value ? (m(), v("div", ke, [
          (m(), v("svg", {
            xmlns: de(xe),
            viewBox: `0 0 ${a.value.width < 0 ? 0 : a.value.width} ${a.value.height < 0 ? 0 : a.value.height}`
          }, [
            n("defs", null, [
              n("linearGradient", {
                id: C.value,
                x1: "0%",
                y1: "0%",
                x2: "0%",
                y2: "100%"
              }, [
                n("stop", {
                  offset: "0%",
                  "stop-color": `${l.minimapLineColor}50`
                }, null, 8, we),
                $e
              ], 8, Ce)
            ]),
            n("path", {
              d: `M${c.value.fullSet}`,
              stroke: `${l.minimapLineColor}`,
              fill: "none",
              "stroke-width": "1",
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              style: { opacity: "1" }
            }, null, 8, Me),
            n("rect", {
              x: p.value.x,
              width: p.value.width < 0 ? 0 : p.value.width,
              height: Math.max(a.value.height, 0),
              y: 0,
              fill: g.value,
              rx: l.minimapSelectionRadius,
              stroke: "none"
            }, null, 8, Ee),
            n("path", {
              d: `M${s.value / 2},${Math.max(a.value.height, 0)} ${c.value.fullSet} L${a.value.width - s.value / 2},${Math.max(a.value.height, 0)}Z`,
              fill: `url(#${C.value})`,
              stroke: "none",
              style: { opacity: "1" }
            }, null, 8, Pe),
            n("rect", {
              x: p.value.x,
              width: p.value.width < 0 ? 0 : p.value.width,
              height: Math.max(a.value.height, 0),
              y: 0,
              rx: l.minimapSelectionRadius,
              fill: g.value
            }, null, 8, Le),
            n("rect", {
              x: p.value.x,
              width: p.value.width < 0 ? 0 : p.value.width,
              height: Math.max(a.value.height, 0),
              y: 0,
              fill: l.minimapSelectedColor,
              rx: l.minimapSelectionRadius,
              style: S({
                opacity: l.minimapSelectedColorOpacity
              })
            }, null, 12, Ie),
            n("path", {
              d: `M${c.value.sliced[0].x},${Math.max(a.value.height, 0)} ${c.value.selectionSet} L${c.value.sliced.at(-1).x},${Math.max(a.value.height, 0)}Z`,
              fill: `url(#${C.value})`,
              stroke: "none",
              style: { opacity: "1" }
            }, null, 8, ze),
            n("path", {
              d: `M ${c.value.selectionSet}`,
              stroke: `${l.minimapLineColor}`,
              fill: "transparent",
              "stroke-width": "2",
              "stroke-linecap": "round",
              "stroke-linejoin": "round"
            }, null, 8, Fe),
            n("circle", {
              cx: c.value.firstPlot.x,
              cy: c.value.firstPlot.y,
              "stroke-width": "0.5",
              stroke: g.value,
              r: "3",
              fill: l.minimapLineColor
            }, null, 8, Re),
            n("circle", {
              cx: c.value.lastPlot.x,
              cy: c.value.lastPlot.y,
              "stroke-width": "0.5",
              stroke: g.value,
              r: "3",
              fill: l.minimapLineColor
            }, null, 8, Ve),
            b.value !== null ? (m(!0), v(F, { key: 0 }, R(I.value, (r, h) => (m(), v("g", null, [
              b.value === r && r >= l.valueStart && r < l.valueEnd ? (m(), v("line", {
                key: 0,
                x1: s.value * h + s.value / 2,
                x2: s.value * h + s.value / 2,
                y1: 0,
                y2: Math.max(a.value.height, 0),
                stroke: l.minimapIndicatorColor,
                "stroke-linecap": "round",
                "stroke-dasharray": "2",
                "stroke-width": "1"
              }, null, 8, Ae)) : N("", !0)
            ]))), 256)) : N("", !0),
            (m(!0), v(F, null, R(I.value, (r, h) => (m(), v("rect", {
              x: s.value * h,
              y: 0,
              height: Math.max(a.value.height, 0),
              width: s.value < 0 ? 0 : s.value,
              fill: "transparent",
              style: { "pointer-events": "all !important" },
              onMouseenter: (E) => J(r),
              onMouseleave: i[0] || (i[0] = (E) => {
                b.value = null, x("trapMouse", null);
              })
            }, null, 40, Be))), 256))
          ], 8, Ne))
        ])) : N("", !0),
        Oe,
        n("div", {
          class: "range-highlight",
          style: S(X.value)
        }, null, 4),
        V((m(), v("input", {
          ref_key: "rangeStart",
          ref: $,
          key: `range-min${K.value}`,
          type: "range",
          class: "range-left",
          min: l.min,
          max: l.max,
          "onUpdate:modelValue": i[1] || (i[1] = (r) => o.value = r),
          onInput: q
        }, null, 40, De)), [
          [A, o.value]
        ]),
        n("div", {
          class: "thumb-label thumb-label-left",
          style: S(Q.value)
        }, B(l.labelLeft), 5),
        V(n("input", {
          ref_key: "rangeEnd",
          ref: M,
          type: "range",
          class: "range-right",
          min: l.min,
          max: l.max,
          "onUpdate:modelValue": i[2] || (i[2] = (r) => u.value = r),
          onInput: G
        }, null, 40, Ue), [
          [A, u.value]
        ]),
        n("div", {
          class: "thumb-label thumb-label-right",
          style: S(H.value)
        }, B(l.labelRight), 5)
      ], 512)
    ]));
  }
}, qe = /* @__PURE__ */ ye(Te, [["__scopeId", "data-v-cf67df9a"]]);
export {
  qe as S
};
