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