import { ref as n, onMounted as Q, onBeforeUnmount as Y, computed as A, watch as Z, openBlock as l, createElementBlock as o, normalizeStyle as f, createBlock as ee, createCommentVNode as v, unref as te, createVNode as M, renderSlot as z, createElementVNode as C, mergeProps as V, normalizeProps as E, guardReactiveProps as U, toDisplayString as ae } from "vue";
import { u as se } from "./useNestedProp-Cwjz-hIm.js";
import { u as le, c as oe, X as re, F as W } from "./index-OhfEeW2N.js";
import { t as ue, u as ie } from "./useResponsive-CoxXLe23.js";
import P from "./BaseIcon-QBIdDtsh.js";
import { _ as ne } from "./Title-hfEOmPlv.js";
import { _ as ce } from "./PackageVersion-DBbbI7TU.js";
import { _ as de } from "./_plugin-vue_export-helper-CHgC5LLL.js";
class he {
  constructor(H, k, T, L = !0, $ = !0) {
    this.interval = k, this.elapsed = 0, this.isPaused = !1;
    const S = `
            let interval;
            let elapsed = 0;
            let paused = false;
            let startTime;
            let tickInterval;

            onmessage = function(e) {
                const { action, data } = e.data;

                switch(action) {
                    case 'start':
                        startTime = Date.now();
                        tickInterval = data.interval;
                        elapsed = 0;
                        paused = false;
                        interval = setInterval(() => {
                            elapsed += tickInterval;
                            postMessage({ elapsed, timestamp: Date.now() });
                        }, tickInterval);
                        break;
                    
                    case 'pause':
                        paused = true;
                        clearInterval(interval);
                        elapsed = Date.now() - startTime;
                        break;

                    case 'resume':
                        if (paused) {
                            startTime = Date.now() - elapsed;
                            interval = setInterval(() => {
                                elapsed += tickInterval;
                                postMessage({ elapsed, timestamp: Date.now() });
                            }, tickInterval);
                        }
                        paused = false;
                        break;

                    case 'stop':
                        clearInterval(interval);
                        elapsed = 0;
                        postMessage({ elapsed });
                        break;

                    case 'reset':
                        elapsed = 0;
                        clearInterval(interval);
                        postMessage({ elapsed });
                        break;

                    case 'lap':
                        postMessage({
                            elapsed,
                            timestamp: Date.now(),
                            action: 'lap'
                        });
                        break;

                    default:
                        break;
                }
            };
        `, R = new Blob([S], { type: "application/javascript" }), m = URL.createObjectURL(R), i = new Worker(m);
    function x(c) {
      let e = Math.floor(c / 1e3), w = Math.floor(c % 1e3 / 10), y = Math.floor(e / 3600), t = Math.floor(e % 3600 / 60), d = e % 60, u = "";
      return $ && (u += String(y).padStart(2, "0") + ":"), u += String(t).padStart(2, "0") + ":", u += String(d).padStart(2, "0"), L && (u += "." + String(w).padStart(2, "0")), u;
    }
    this.start = () => {
      this.isPaused = !1, i.postMessage({ action: "start", data: { interval: this.interval } });
    }, this.pause = () => {
      this.isPaused ? this.resume() : (this.isPaused = !0, i.postMessage({ action: "pause" }));
    }, this.resume = () => {
      this.isPaused && (i.postMessage({ action: "resume" }), this.isPaused = !1);
    }, this.stop = () => {
      i.postMessage({ action: "stop" }), this.isPaused = !1;
    }, this.reset = () => {
      i.postMessage({ action: "reset" }), this.elapsed = 0, this.isPaused = !1;
    }, this.restart = () => {
      this.stop(), this.start();
    }, this.lap = () => new Promise((c) => {
      i.postMessage({ action: "lap" });
      const e = (w) => {
        const { elapsed: y, timestamp: t, action: d } = w.data;
        if (d === "lap") {
          const u = x(y);
          c({
            timestamp: t || 0,
            elapsed: y,
            formatted: u
          });
        }
      };
      i.addEventListener("message", e, { once: !0 });
    }), i.onmessage = (c) => {
      const { elapsed: e, timestamp: w } = c.data;
      this.elapsed = e, H({
        timestamp: w || 0,
        elapsed: this.elapsed,
        formatted: x(this.elapsed)
      });
    }, i.onerror = (c) => {
      T && T(c);
    };
  }
}
const ve = ["xmlns", "viewBox"], pe = ["width", "height"], fe = { key: 1 }, we = ["id"], ke = ["stop-color"], ge = ["stop-color"], me = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ye = ["d", "stroke", "stroke-width"], be = ["r", "fill", "stroke", "stroke-width"], _e = ["r", "fill", "stroke", "stroke-width"], Me = ["x", "y"], Ce = ["x", "y", "font-size", "fill", "font-weight"], Te = {
  key: 0,
  class: "vue-ui-timer-controls"
}, $e = ["title"], xe = ["title"], Ie = ["title"], Pe = ["title"], Se = ["title"], Re = {
  __name: "vue-ui-timer",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: ["start", "pause", "reset", "restart", "lap"],
  setup(G, { expose: H, emit: k }) {
    const T = G, { vue_ui_timer: L } = le(), $ = n(null), S = n(null), R = n(null), m = n(null), i = n(oe()), x = n(0);
    Q(() => {
      c();
    });
    function c() {
      if (e.value.responsive) {
        const a = ue(() => {
          const { width: r, height: h } = ie({
            chart: $.value,
            title: e.value.style.title.text ? S.value : null,
            legend: R.value
          });
          requestAnimationFrame(() => {
            t.value.width = r, t.value.height = h, t.value.tracker.core = W({
              relator: Math.min(r, h),
              adjuster: e.value.style.width,
              source: 6 * e.value.stopwatch.tracker.radiusRatio,
              threshold: 1,
              fallback: 1
            }), t.value.tracker.aura = W({
              relator: Math.min(r, h),
              adjuster: e.value.style.width,
              source: 12 * e.value.stopwatch.tracker.aura.radiusRatio,
              threshold: 1,
              fallback: 1
            }), t.value.label = W({
              relator: Math.min(r, h),
              adjuster: e.value.style.width,
              source: e.value.stopwatch.label.fontSize,
              threshold: 10,
              fallback: 10
            });
          });
        });
        m.value = new ResizeObserver(a), m.value.observe($.value.parentNode);
      }
    }
    Y(() => {
      m.value && m.value.disconnect();
    });
    const e = A({
      get: () => w(),
      set: (a) => a
    });
    function w() {
      return se({
        userConfig: T.config,
        defaultConfig: L
      });
    }
    Z(() => T.config, (a) => {
      e.value = w(), c(), x.value += 1;
    }, { deep: !0 });
    const y = A(() => {
      if (e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
        return "00:00:00.00";
      if (e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
        return "00:00:00";
      if (!e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
        return "00:00.00";
      if (!e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
        return "00:00";
    }), t = n({
      height: e.value.style.height,
      width: e.value.style.width,
      tracker: {
        core: 6 * e.value.stopwatch.tracker.radiusRatio,
        aura: 12 * e.value.stopwatch.tracker.aura.radiusRatio
      },
      label: e.value.stopwatch.label.fontSize
    }), d = n(0), u = new he(
      (a) => X(a),
      10,
      "",
      e.value.stopwatch.showHundredth,
      e.value.stopwatch.showHours
    ), D = n(!0), s = n(!1), p = n(!1);
    function N() {
      k("start"), D.value && u.start(), D.value = !1, s.value = !0;
    }
    function j() {
      s.value && (k("reset"), u.stop(), b.value = [], D.value = !0, s.value = !1);
    }
    function B() {
      p.value = !p.value, k("pause", d.value), u.pause();
    }
    function O() {
      s.value && (p.value = !1, k("restart"), b.value = [], u.restart());
    }
    const b = n([]);
    async function F() {
      if (!s.value || p.value) return;
      const a = await u.lap();
      a && (b.value.push(a), k("lap", b.value));
    }
    function X({ timestamp: a, elapsed: r, formatted: h }) {
      d.value = { timestamp: a, elapsed: r, formatted: h };
    }
    const g = A(() => Math.min(t.value.width, t.value.height) / 2.5 * e.value.stopwatch.track.radiusRatio);
    function q(a, r) {
      const I = 360 / (r * 1e3);
      return a * I % 360;
    }
    function J(a) {
      let r = a * (Math.PI / 180), h = t.value.width / 2 + g.value * Math.cos(r), I = t.value.height / 2 + g.value * Math.sin(r);
      return { cx: h, cy: I };
    }
    const _ = A(() => {
      const a = q(d.value.elapsed, e.value.stopwatch.cycleSeconds), { cx: r, cy: h } = J(a - 90), I = a > 180 ? 1 : 0;
      return {
        cx: r || t.value.width / 2,
        cy: h || t.value.height / 2 - g.value,
        largeArcFlag: I,
        sweepFlag: 1
      };
    });
    return H({
      start: N,
      pause: B,
      reset: j,
      restart: O,
      lap: F
    }), (a, r) => (l(), o("div", {
      ref_key: "timerChart",
      ref: $,
      class: "vue-ui-timer",
      style: f({
        fontFamily: e.value.style.fontFamily,
        width: "100%",
        height: e.value.responsive ? "100%" : "auto",
        textAlign: "center"
      })
    }, [
      e.value.style.title.text ? (l(), o("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: S,
        style: f({
          width: "100%",
          background: e.value.style.backgroundColor
        })
      }, [
        (l(), ee(ne, {
          key: `title_${x.value}`,
          config: {
            title: {
              cy: "title",
              ...e.value.style.title
            },
            subtitle: {
              cy: "subtitle",
              ...e.value.style.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 4)) : v("", !0),
      (l(), o("svg", {
        xmlns: te(re),
        viewBox: `0 0 ${t.value.width <= 0 ? 10 : t.value.width} ${t.value.height <= 0 ? 10 : t.value.height}`,
        style: f({
          maxWidth: "100%",
          overflow: "visible",
          background: e.value.style.backgroundColor
        })
      }, [
        M(ce),
        a.$slots["chart-background"] ? (l(), o("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: t.value.width <= 0 ? 10 : t.value.width,
          height: t.value.height <= 0 ? 10 : t.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          z(a.$slots, "chart-background", {}, void 0, !0)
        ], 8, pe)) : v("", !0),
        e.value.stopwatch.tracker.gradient.show ? (l(), o("defs", fe, [
          C("radialGradient", {
            id: `tracker_gradient_${i.value}`,
            cx: "50%",
            cy: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            C("stop", {
              offset: "0%",
              "stop-color": e.value.stopwatch.tracker.gradient.color
            }, null, 8, ke),
            C("stop", {
              offset: "100%",
              "stop-color": e.value.stopwatch.tracker.fill
            }, null, 8, ge)
          ], 8, we)
        ])) : v("", !0),
        C("circle", {
          cx: t.value.width / 2,
          cy: t.value.height / 2,
          r: g.value,
          fill: e.value.stopwatch.track.fill,
          stroke: e.value.stopwatch.track.stroke,
          "stroke-width": e.value.stopwatch.track.strokeWidth
        }, null, 8, me),
        e.value.stopwatch.cycleTrack.show ? (l(), o("path", {
          key: 2,
          d: `M ${t.value.width / 2},${t.value.height / 2 - g.value} A ${g.value},${g.value} 0 ${_.value.largeArcFlag},${_.value.sweepFlag} ${_.value.cx},${_.value.cy}`,
          stroke: e.value.stopwatch.cycleTrack.stroke,
          "stroke-width": e.value.stopwatch.cycleTrack.strokeWidth,
          "stroke-linecap": "round",
          fill: "none"
        }, null, 8, ye)) : v("", !0),
        C("circle", V(_.value, {
          r: t.value.tracker.core,
          fill: e.value.stopwatch.tracker.gradient.show ? `url(#tracker_gradient_${i.value})` : e.value.stopwatch.tracker.fill,
          stroke: e.value.stopwatch.tracker.stroke,
          "stroke-width": e.value.stopwatch.tracker.strokeWidth
        }), null, 16, be),
        e.value.stopwatch.tracker.aura.show ? (l(), o("circle", V({ key: 3 }, _.value, {
          r: t.value.tracker.aura,
          fill: `${e.value.stopwatch.tracker.aura.fill}20`,
          stroke: e.value.stopwatch.tracker.aura.stroke,
          "stroke-width": e.value.stopwatch.tracker.aura.strokeWidth
        }), null, 16, _e)) : v("", !0),
        a.$slots.time ? (l(), o("foreignObject", {
          key: 4,
          x: t.value.width / 2,
          y: t.value.height / 2,
          height: "0.1",
          width: "0.1",
          style: { overflow: "visible" }
        }, [
          z(a.$slots, "time", E(U({ ...d.value })), void 0, !0)
        ], 8, Me)) : (l(), o("text", {
          key: 5,
          x: t.value.width / 2,
          y: t.value.height / 2 + t.value.label / 4,
          "font-size": t.value.label,
          "text-anchor": "middle",
          fill: e.value.stopwatch.label.color,
          "font-weight": e.value.stopwatch.label.bold ? "bold" : "normal",
          style: { "font-variant-numeric": "tabular-nums !important" }
        }, ae(d.value.formatted || y.value), 9, Ce))
      ], 12, ve)),
      C("div", {
        ref_key: "chartLegend",
        ref: R,
        style: f({ width: "100%", backgroundColor: e.value.stopwatch.legend.backgroundColor })
      }, [
        a.$slots.controls ? v("", !0) : (l(), o("div", Te, [
          e.value.stopwatch.legend.buttons.start ? (l(), o("button", {
            key: 0,
            title: e.value.stopwatch.legend.buttonTitles.start,
            onClick: N,
            class: "vue-ui-timer-button",
            style: f({
              opacity: s.value ? 0.2 : 1,
              cursor: s.value ? "default" : "pointer"
            })
          }, [
            M(P, {
              name: "play",
              stroke: e.value.stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, $e)) : v("", !0),
          e.value.stopwatch.legend.buttons.pause ? (l(), o("button", {
            key: 1,
            title: p.value ? e.value.stopwatch.legend.buttonTitles.resume : e.value.stopwatch.legend.buttonTitles.pause,
            onClick: B,
            class: "vue-ui-timer-button",
            style: f({
              opacity: s.value ? 1 : 0.2,
              cursor: s.value ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "pause",
              stroke: e.value.stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, xe)) : v("", !0),
          e.value.stopwatch.legend.buttons.reset ? (l(), o("button", {
            key: 2,
            title: e.value.stopwatch.legend.buttonTitles.reset,
            onClick: j,
            class: "vue-ui-timer-button",
            style: f({
              opacity: s.value ? 1 : 0.2,
              cursor: s.value ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "stop",
              stroke: e.value.stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, Ie)) : v("", !0),
          e.value.stopwatch.legend.buttons.restart ? (l(), o("button", {
            key: 3,
            title: e.value.stopwatch.legend.buttonTitles.restart,
            onClick: O,
            class: "vue-ui-timer-button",
            style: f({
              opacity: s.value ? 1 : 0.2,
              cursor: s.value ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "restart",
              stroke: e.value.stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, Pe)) : v("", !0),
          e.value.stopwatch.legend.buttons.lap ? (l(), o("button", {
            key: 4,
            title: e.value.stopwatch.legend.buttonTitles.lap,
            onClick: F,
            class: "vue-ui-timer-button",
            style: f({
              opacity: s.value && !p.value ? 1 : 0.2,
              cursor: s.value && !p.value ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "lap",
              stroke: e.value.stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, Se)) : v("", !0)
        ])),
        z(a.$slots, "controls", E(U({
          start: N,
          pause: B,
          reset: j,
          restart: O,
          lap: F,
          laps: b.value,
          isRunning: s.value,
          isPaused: p.value,
          ...d.value
        })), void 0, !0),
        z(a.$slots, "laps", E(U({
          laps: b.value,
          lap: F,
          isRunning: s.value,
          isPaused: p.value,
          ...d.value
        })), void 0, !0)
      ], 4)
    ], 4));
  }
}, Be = /* @__PURE__ */ de(Re, [["__scopeId", "data-v-be90052b"]]);
export {
  Be as default
};
