import { a3 as V, a4 as a, a5 as f, fX as G, aG as O, fY as I, a9 as U, ab as Z, aa as X, a as b, V as Y, U as _, H as i, ad as d, I as w, am as M, ae as s, af as c, ag as q, ah as J, aj as v, ai as K, aA as x, fZ as L, c8 as Q, f_ as R, f$ as p, g0 as tt, g1 as et, g2 as at } from "./56c67d3b.js";
import { useContext as k, useState as m, useEffect as h, useMemo as nt } from "react";
import "react-dom";
const it = V.div`
  align-items: center;
  cursor: pointer;
  font-size: 2.9em;
  text-align: center;
  word-wrap: break-word;
  line-height: initial;
  ${(t) => t.$animationStyle}
  background-color: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.background;
}};
 font-weight: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.textWeight;
}};
border-radius: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.radius;
}};
font-size: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.textSize;
}};
rotate: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.rotation;
}};
text-transform: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.textTransform;
}};
color: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.text;
}};
border: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.border;
}};
border-style: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.borderStyle;
}};
border-width: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.borderWidth;
}};
font-family: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.fontFamily;
}};
font-style: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.fontStyle;
}};
margin: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.margin;
}};
padding: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.padding;
}};
background: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.background;
}};
text-decoration: ${(t) => {
  var e;
  return (e = t == null ? void 0 : t.$style) == null ? void 0 : e.textDecoration;
}};
`, lt = V.div`
  width: 100%;
  min-height: 35px;
  display: flex;
  justify-content: center;
  padding-right: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
`, D = V(Q)`
background-color: ${(t) => t.$style.background};
font-weight: ${(t) => t.$style.textWeight};
border-radius: ${(t) => t.$style.radius};
font-size: ${(t) => t.$style.textSize};
rotate: ${(t) => t.$style.rotation};
text-transform: ${(t) => t.$style.textTransform};
color: ${(t) => t.$style.text};
border: ${(t) => t.$style.border};
border-style: ${(t) => t.$style.borderStyle};
border-width: ${(t) => t.$style.borderWidth};
font-family: ${(t) => t.$style.fontFamily};
font-style: ${(t) => t.$style.fontStyle};
margin: ${(t) => t.$style.margin};
padding: ${(t) => t.$style.padding};
background: ${(t) => t.$style.background};
text-decoration: ${(t) => t.$style.textDecoration};
`;
function rt(t) {
  const e = Math.floor(t / 36e5), y = Math.floor(t % (1e3 * 60 * 60) / (1e3 * 60)), n = Math.floor(t % (1e3 * 60) / 1e3), l = t % 1e3;
  return `${g(e)}:${g(y)}:${g(n)}:${g(l, 3)}`;
}
function g(t, e = 2) {
  return String(t).padStart(e, "0");
}
const dt = [R, p, tt, et, at], ot = [{
  label: a("timer.timer"),
  value: "timer"
}, {
  label: a("timer.countdown"),
  value: "countdown"
}], st = {
  style: f(G),
  animationStyle: f(O),
  startButtonStyle: f(I),
  resetButtonStyle: f(I),
  onEvent: U(dt),
  defaultValue: Z("defaultValue", "00:00:00:000"),
  timerType: X(ot, "timer"),
  elapsedTime: b(0),
  timerState: b("stoped"),
  actionHandler: b(""),
  hideButton: Y
}, ct = (t) => {
  const [e, y] = m(0), [n, l] = m("stoped"), [$, S] = m(0), [r, P] = m(0), [N, T] = m(!0);
  h(() => {
    t.actionHandler != "" && (t.actionHandler === "start" ? H() : t.actionHandler === "pause" ? B() : t.actionHandler === "resume" ? C() : t.actionHandler === "reset" && E(), t.dispatch(x("actionHandler", "", !0)));
  }, [t.actionHandler]), h(() => {
    n === "stoped" && S(u);
  }, [t.defaultValue.value]), h(() => {
    n === "started" && z();
  }, [e]), h(() => {
    n === "stoped" && r && r && clearInterval(r), t.dispatch(x("timerState", n, !1));
  }, [n]);
  const u = nt(() => {
    const [o, W, j, F] = t.defaultValue.value && t.defaultValue.value.split(":") || [];
    let A = parseInt(o, 10) * 36e5 + parseInt(W, 10) * 6e4 + parseInt(j, 10) * 1e3 + parseInt(F, 10);
    return isNaN(A) ? 0 : A;
  }, [t.defaultValue.value]), z = () => {
    P(Number(setInterval(() => {
      let o = t.timerType === "timer" ? Date.now() - e : u - (Date.now() - e);
      o <= 0 && (l("stoped"), t.onEvent("countdown"), T(!1), o = 0), S(o), t.dispatch(x("elapsedTime", o, !1));
    }, 18)));
  }, H = () => {
    l("started"), t.onEvent("start"), y(t.timerType === "timer" ? Date.now() - u : Date.now());
  }, B = () => {
    r && clearInterval(r), l("paused"), t.onEvent("pause");
  }, C = () => {
    y(t.timerType === "timer" ? Date.now() - $ : Date.now() - (u - $)), l("started"), t.onEvent("resume");
  }, E = () => {
    r && clearInterval(r), l("stoped"), S(u), T(!0), t.onEvent("reset");
  };
  return /* @__PURE__ */ d(it, {
    $style: t.style,
    $animationStyle: t.animationStyle,
    children: [rt($), /* @__PURE__ */ i(lt, {
      hidden: t.hideButton,
      children: /* @__PURE__ */ d(L, {
        children: [/* @__PURE__ */ i(D, {
          $style: t.startButtonStyle,
          disabled: !N,
          type: n === "stoped" ? "primary" : "default",
          onClick: () => {
            n === "stoped" ? H() : n === "started" ? B() : n === "paused" && C();
          },
          children: n === "stoped" ? a("timer.start") : n === "started" ? a("timer.pause") : a("timer.resume")
        }), /* @__PURE__ */ i(D, {
          $style: t.resetButtonStyle,
          onClick: () => E(),
          children: a("timer.reset")
        })]
      })
    })]
  });
};
let ut = function() {
  return new _(st, (t, e) => /* @__PURE__ */ i(ct, {
    ...t,
    dispatch: e
  })).setPropertyViewFn((t) => /* @__PURE__ */ d(w, {
    children: [["logic", "both"].includes(k(M).editorModeStatus) && /* @__PURE__ */ d(w, {
      children: [/* @__PURE__ */ d(s, {
        name: c.basic,
        children: [t.timerType.propertyView({
          label: a("timer.timerType")
        }), t.defaultValue.propertyView({
          label: a("timer.defaultValue")
        }), t.hideButton.propertyView({
          label: a("timer.hideButton")
        })]
      }), /* @__PURE__ */ d(s, {
        name: c.interaction,
        children: [q(t), t.onEvent.propertyView()]
      })]
    }), ["layout", "both"].includes(k(M).editorModeStatus) && /* @__PURE__ */ d(w, {
      children: [/* @__PURE__ */ i(s, {
        name: c.style,
        children: t.style.getPropertyView()
      }), /* @__PURE__ */ i(s, {
        name: c.animationStyle,
        hasTooltip: !0,
        children: t.animationStyle.getPropertyView()
      }), /* @__PURE__ */ i(s, {
        name: c.startButtonStyle,
        children: t.startButtonStyle.getPropertyView()
      }), /* @__PURE__ */ i(s, {
        name: c.resetButtonStyle,
        children: t.resetButtonStyle.getPropertyView()
      })]
    })]
  })).setExposeMethodConfigs([{
    method: {
      name: "start/pause",
      description: a("timer.startPause"),
      params: []
    },
    execute: async (t, e) => {
      t.children.timerState.value === "stoped" ? t.children.actionHandler.dispatch(t.children.actionHandler.changeValueAction("start")) : t.children.timerState.value === "paused" ? t.children.actionHandler.dispatch(t.children.actionHandler.changeValueAction("resume")) : t.children.timerState.value === "started" && t.children.actionHandler.dispatch(t.children.actionHandler.changeValueAction("pause"));
    }
  }, {
    method: {
      name: "reset",
      description: a("timer.reset"),
      params: []
    },
    execute: async (t, e) => {
      t.children.actionHandler.dispatch(t.children.actionHandler.changeValueAction("reset"));
    }
  }]).build();
}();
const ft = J(ut, [new v("defaultValue", a("timer.defaultValue")), new v("elapsedTime", a("timer.elapsedTime")), new v("timerState", a("timer.timerState")), K]);
export {
  ft as TimerComp
};
