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