import { useCssVars as Z, ref as d, computed as r, watch as $, onMounted as H, openBlock as v, createElementBlock as h, createElementVNode as i, normalizeStyle as p, createVNode as J, renderSlot as K, createCommentVNode as F, Fragment as Q, unref as Y, withDirectives as z, vModelText as R, toDisplayString as A, pushScopeId as ee, popScopeId as te } from "vue";
import le from "./BaseIcon-BNFf4B_v.js";
import { t as ae, u as ie } from "./useResponsive-NZB-WLRF.js";
import { c as ne, P as E, O as L, X as oe } from "./index-CguVaFlt.js";
import { _ as ue } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const I = (l) => (ee("data-v-6719ba10"), l = l(), te(), l), re = {
  "data-html2canvas-ignore": "",
  style: { padding: "0 24px" }
}, se = {
  class: "vue-data-ui-slicer-labels",
  style: { position: "relative", "z-index": "1" }
}, de = {
  key: 0,
  style: { width: "100%", position: "relative" }
}, me = {
  class: "minimap",
  style: { width: "100%" }
}, ce = ["xmlns", "viewBox"], ve = ["id"], he = ["stop-color"], pe = /* @__PURE__ */ I(() => /* @__PURE__ */ i("stop", {
  offset: "100%",
  "stop-color": "transparent"
}, null, -1)), fe = ["d", "stroke", "fill"], be = ["x2", "y1", "y2", "stroke"], ge = ["y2", "stroke"], ye = ["x1", "x2", "y2", "stroke"], xe = /* @__PURE__ */ I(() => /* @__PURE__ */ i("div", { class: "slider-track" }, null, -1)), Se = ["min", "max"], Ne = ["min", "max"], ke = {
  __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
    }
  },
  emits: ["update:start", "update:end", "reset"],
  setup(l, { emit: b }) {
    const e = l;
    Z((a) => ({
      "6d560574": V.value,
      "614a85ba": f.value,
      "40a740aa": O.value,
      "417fc6ea": l.selectColor,
      "5442ac78": B.value
    }));
    const n = d(e.min), o = d(e.max), m = r(() => !!e.minimap.length), y = d(ne()), P = r(() => {
      const a = e.max - e.min, u = (n.value - e.min) / a * 100, s = (o.value - e.min) / a * 100;
      return {
        left: `${u}%`,
        width: `${s - u}%`,
        background: e.selectColor
      };
    }), V = r(() => e.inputColor), B = r(() => e.background), O = r(() => `${e.selectColor}33`), f = r(() => e.borderColor);
    function x() {
      b("reset");
    }
    function M() {
      Number(n.value) > Number(o.value) - 1 && (n.value = Number(o.value) - 1), b("update:start", Number(n.value));
    }
    function D() {
      Number(o.value) < Number(n.value) + 1 && (o.value = Number(n.value) + 1), b("update:end", Number(o.value));
    }
    $(
      () => e.min,
      (a) => {
        Number(n.value) < Number(a) && (n.value = Number(a)), Number(o.value) < Number(a) && (o.value = Number(a));
      }
    ), $(
      () => e.max,
      (a) => {
        Number(n.value) > Number(a) && (n.value = Number(a)), Number(o.value) > Number(a) && (o.value = Number(a));
      }
    );
    const g = d(null), t = d({
      width: 1,
      height: 1
    }), S = d(null);
    H(() => {
      if (m.value) {
        const a = ae(() => {
          const { width: u, height: s } = ie({
            chart: g.value
          });
          t.value.width = u, t.value.height = s - 47;
        });
        S.value = new ResizeObserver(a), S.value.observe(g.value);
      }
    });
    const N = r(() => e.minimap.length ? t.value.width / e.minimap.length : 0);
    r(() => ({
      x: N.value * e.valueStart,
      width: N.value * (e.valueEnd - e.valueStart)
    }));
    const U = r(() => {
      if (!e.minimap.length) return [];
      const a = Math.max(...e.minimap), u = Math.min(...e.minimap) - 10, s = a - (u > 0 ? 0 : u), c = e.minimap.map((q, G) => {
        const T = q - u;
        return {
          x: t.value.width / (e.minimap.length - 1) * G,
          y: t.value.height - T / s * (t.value.height * 0.9)
        };
      }), _ = e.smoothMinimap ? E(c) : L(c), w = [...c].slice(e.valueStart, e.valueEnd), j = e.smoothMinimap ? E(w) : L(w);
      return {
        fullSet: _,
        selectionSet: j,
        firstPlot: c[e.valueStart],
        lastPlot: c[e.valueEnd - 1]
      };
    }), k = r(() => e.max - e.min), C = r(() => ({
      left: (n.value - e.min) / k.value * 100,
      width: (o.value - n.value) / k.value * 100
    })), W = r(() => ({
      left: 0,
      color: e.textColor,
      fontSize: `${e.fontSize}px`,
      top: m.value ? "28px" : "-28px",
      pointerEvents: "none"
    })), X = r(() => ({
      right: 0,
      color: e.textColor,
      fontSize: `${e.fontSize}px`,
      top: m.value ? "28px" : "-28px",
      direction: "rtl",
      pointerEvents: "none"
    }));
    return (a, u) => (v(), h("div", re, [
      i("div", se, [
        l.valueStart > 0 || l.valueEnd < l.max ? (v(), h("div", de, [
          l.useResetSlot ? K(a.$slots, "reset-action", {
            key: 1,
            reset: x
          }, void 0, !0) : (v(), h("button", {
            key: 0,
            "data-cy-reset": "",
            tabindex: "0",
            role: "button",
            class: "vue-data-ui-refresh-button",
            style: p({
              top: m.value ? "36px" : "-16px"
            }),
            onClick: x
          }, [
            J(le, {
              name: "refresh",
              stroke: l.textColor
            }, null, 8, ["stroke"])
          ], 4))
        ])) : F("", !0)
      ]),
      i("div", {
        class: "double-range-slider",
        ref_key: "minimapWrapper",
        ref: g,
        style: { "z-index": "0" }
      }, [
        m.value ? (v(), h(Q, { key: 0 }, [
          i("div", me, [
            (v(), h("svg", {
              xmlns: Y(oe),
              viewBox: `0 0 ${t.value.width < 0 ? 0 : t.value.width} ${t.value.height < 0 ? 0 : t.value.height}`
            }, [
              i("defs", null, [
                i("linearGradient", {
                  id: y.value,
                  x1: "0%",
                  y1: "0%",
                  x2: "0%",
                  y2: "100%"
                }, [
                  i("stop", {
                    offset: "0%",
                    "stop-color": `${l.minimapLineColor}50`
                  }, null, 8, he),
                  pe
                ], 8, ve)
              ]),
              i("path", {
                d: `M0,${t.value.height} ${U.value.fullSet} L${t.value.width},${t.value.height}Z`,
                stroke: `${l.minimapLineColor}`,
                fill: `url(#${y.value})`,
                "stroke-width": "1",
                "stroke-linecap": "round",
                "stroke-linejoin": "round",
                style: { opacity: "1" }
              }, null, 8, fe),
              i("line", {
                x1: 0,
                x2: t.value.width < 0 ? 0 : t.value.width,
                y1: t.value.height < 0 ? 0 : t.value.height,
                y2: t.value.height < 0 ? 0 : t.value.height,
                stroke: f.value,
                "stroke-width": "3"
              }, null, 8, be),
              i("line", {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: t.value.height < 0 ? 0 : t.value.height,
                stroke: f.value,
                "stroke-width": "5"
              }, null, 8, ge),
              i("line", {
                x1: t.value.width < 0 ? 0 : t.value.width,
                x2: t.value.width < 0 ? 0 : t.value.width,
                y1: 0,
                y2: t.value.height < 0 ? 0 : t.value.height,
                stroke: f.value,
                "stroke-width": "5"
              }, null, 8, ye)
            ], 8, ce))
          ]),
          i("div", {
            class: "sel",
            style: p({
              position: "absolute",
              top: "-33px",
              left: `calc(${C.value.left}%)`,
              background: l.minimapSelectedColor,
              height: "40px",
              width: C.value.width + "%",
              borderRadius: `${l.minimapSelectionRadius}px ${l.minimapSelectionRadius}px 0 0`,
              opacity: l.minimapSelectedColorOpacity
            })
          }, null, 4)
        ], 64)) : F("", !0),
        xe,
        i("div", {
          class: "range-highlight",
          style: p(P.value)
        }, null, 4),
        z(i("input", {
          type: "range",
          min: l.min,
          max: l.max,
          "onUpdate:modelValue": u[0] || (u[0] = (s) => n.value = s),
          onInput: M
        }, null, 40, Se), [
          [R, n.value]
        ]),
        i("div", {
          class: "thumb-label thumb-label-left",
          style: p(W.value)
        }, A(l.labelLeft), 5),
        z(i("input", {
          type: "range",
          min: l.min,
          max: l.max,
          "onUpdate:modelValue": u[1] || (u[1] = (s) => o.value = s),
          onInput: D
        }, null, 40, Ne), [
          [R, o.value]
        ]),
        i("div", {
          class: "thumb-label thumb-label-right",
          style: p(X.value)
        }, A(l.labelRight), 5)
      ], 512)
    ]));
  }
}, Re = /* @__PURE__ */ ue(ke, [["__scopeId", "data-v-6719ba10"]]);
export {
  Re as S
};
