import { ref as p, onMounted as x, computed as d, openBlock as s, createElementBlock as a, normalizeStyle as w, createElementVNode as t, createCommentVNode as r, Fragment as _, toDisplayString as v, unref as u } from "vue";
import { u as C, c as z, e as G, i as y, f as g } from "./index-CguVaFlt.js";
import { u as L } from "./useNestedProp-BbEbJmgv.js";
const b = ["viewBox", "width"], N = { key: 0 }, $ = ["id"], F = ["stop-color"], B = ["stop-color"], P = ["stroke"], D = ["stroke"], I = ["width", "fill"], M = ["fill"], U = { key: 0 }, V = ["id"], E = /* @__PURE__ */ t("feGaussianBlur", {
  in: "SourceGraphic",
  stdDeviation: 1
}, null, -1), O = [
  E
], S = ["stroke"], A = ["stroke", "stroke-dasharray", "stroke-dashoffset"], j = ["filter"], T = ["stroke", "stroke-dasharray", "stroke-dashoffset"], q = ["fill"], Q = {
  __name: "vue-ui-gizmo",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Number,
      default: 0
    }
  },
  setup(c) {
    const o = c, { vue_ui_gizmo: k } = C(), l = p(z());
    x(() => {
      !o.dataset && o.dataset !== 0 && G({
        componentName: "VueUiGizmo",
        type: "dataset"
      }), o.dataset < 0 && console.warn("VueUiGizmo: dataset cannot be negative.");
    });
    const e = d(() => L({
      userConfig: o.config,
      defaultConfig: k
    })), f = d(() => ({
      battery: { width: e.value.showPercentage ? 140 : 80, height: 50 },
      gauge: { width: 80, height: 80 }
    })[e.value.type]), n = d(() => {
      const i = 2 * Math.PI * 35, m = i - o.dataset / 100 * i;
      return {
        dasharray: `${i} ${i}`,
        dashoffset: m
      };
    });
    return (h, i) => (s(), a("svg", {
      class: "vue-ui-gizmo",
      viewBox: `0 0 ${f.value.width} ${f.value.height}`,
      width: e.value.size,
      style: w({
        background: "transparent",
        fontFamily: e.value.fontFamily
      })
    }, [
      e.value.useGradient ? (s(), a("defs", N, [
        t("linearGradient", {
          id: `gizmo_gradient_${l.value}`,
          x1: "0%",
          x2: "100%",
          y1: "0%",
          y2: "0%"
        }, [
          t("stop", {
            offset: "0%",
            "stop-color": e.value.gradientColor
          }, null, 8, F),
          t("stop", {
            offset: "100%",
            "stop-color": e.value.color
          }, null, 8, B)
        ], 8, $)
      ])) : r("", !0),
      e.value.type === "battery" ? (s(), a(_, { key: 1 }, [
        t("path", {
          d: "M 5 10 L 5 40 C 5 43 7 45 9 45 L 65 45 C 68 45 70 43 70 40 L 70 38 C 73 38 75 38 75 33 L 75 17 C 75 12 73 12 70 12 L 70 10 C 70 7 68 5 65 5 L 10 5 C 7 5 5 7 5 10",
          stroke: e.value.stroke,
          "stroke-width": 2,
          fill: "none"
        }, null, 8, P),
        t("path", {
          d: "M 70 16 L 70 34",
          stroke: e.value.stroke,
          "stroke-width": 2,
          fill: "none",
          style: { opacity: "0.5" }
        }, null, 8, D),
        t("rect", {
          x: 10,
          y: 10,
          height: 30,
          width: 55 * (c.dataset / 100),
          fill: e.value.useGradient ? `url(#gizmo_gradient_${l.value})` : e.value.color,
          rx: 2
        }, null, 8, I),
        e.value.showPercentage ? (s(), a("text", {
          key: 0,
          x: 85,
          y: 32,
          "text-anchor": "start",
          "font-size": "20",
          fill: e.value.textColor
        }, v(u(y)(
          e.value.formatter,
          o.dataset,
          u(g)({
            v: o.dataset,
            s: "%"
          })
        )), 9, M)) : r("", !0)
      ], 64)) : r("", !0),
      e.value.type === "gauge" ? (s(), a(_, { key: 2 }, [
        e.value.useGradient ? (s(), a("defs", U, [
          t("filter", {
            id: `blur_${l.value}`,
            x: "-50%",
            y: "-50%",
            width: "200%",
            height: "200%"
          }, O, 8, V)
        ])) : r("", !0),
        t("circle", {
          cx: 40,
          cy: 40,
          r: 35,
          stroke: e.value.stroke,
          "stroke-width": 2 * 4,
          fill: "none"
        }, null, 8, S),
        t("circle", {
          cx: 40,
          cy: 40,
          r: 35,
          stroke: e.value.color,
          "stroke-width": 2 * 4,
          "stroke-dasharray": n.value.dasharray,
          "stroke-dashoffset": n.value.dashoffset,
          "stroke-linecap": "round",
          fill: "none",
          style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
        }, null, 8, A),
        e.value.useGradient ? (s(), a("g", {
          key: 1,
          filter: `url(#blur_${l.value})`
        }, [
          t("circle", {
            cx: 40,
            cy: 40,
            r: 35,
            stroke: e.value.gradientColor,
            "stroke-width": 1,
            fill: "none",
            "stroke-dasharray": n.value.dasharray,
            "stroke-dashoffset": n.value.dashoffset,
            style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
          }, null, 8, T)
        ], 8, j)) : r("", !0),
        e.value.showPercentage ? (s(), a("text", {
          key: 2,
          x: 40,
          y: 47,
          "text-anchor": "middle",
          "font-size": "20",
          fill: e.value.textColor
        }, v(u(y)(
          e.value.formatter,
          o.dataset,
          u(g)({
            v: o.dataset,
            s: "%"
          })
        )), 9, q)) : r("", !0)
      ], 64)) : r("", !0)
    ], 12, b));
  }
};
export {
  Q as default
};
