"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const iconsReact = require("@choiceform/icons-react");
const React = require("react");
const tv = require("../tv.cjs");
const designSystem = require("@choiceform/design-system");
const intervalToDuration = require("../../../../../_vendor/date-fns/intervalToDuration.cjs");
const TodoItem = React.memo(
  React.forwardRef(function TodoItem2(props, ref) {
    const { step, isActive, className } = props;
    const state = step.failed ? "failed" : step.completed ? "completed" : isActive ? "active" : "pending";
    const tv$1 = tv.todoItemTv({ state });
    const getDuration = () => {
      if (!step.completed || !step.startedAt || !step.completedAt) return null;
      const start = new Date(step.startedAt);
      const end = new Date(step.completedAt);
      const duration = intervalToDuration.intervalToDuration({ start, end });
      const diff = end.getTime() - start.getTime();
      if (diff < 1e3) {
        return `${diff}ms`;
      }
      const formattedParts = [];
      if (duration.hours) formattedParts.push(`${duration.hours}h`);
      if (duration.minutes) formattedParts.push(`${duration.minutes}m`);
      if (duration.seconds) formattedParts.push(`${duration.seconds}s`);
      return formattedParts.join(" ") || "0s";
    };
    const renderIcon = () => {
      switch (state) {
        case "completed":
          return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.CircleCirclehecirclek, {});
        case "failed":
          return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.CircleRemove, {});
        case "pending":
          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tv$1.queueIcon() });
        case "active":
          return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.LoaderCircle, { className: "animate-spin" });
      }
    };
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref,
        className: tv$1.root({ className }),
        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tv$1.content(), children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tv$1.icon(), children: renderIcon() }),
          /* @__PURE__ */ jsxRuntime.jsx(
            designSystem.MdRender,
            {
              className: tv$1.markdown(),
              components: {
                p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: tv$1.text(), children })
              },
              content: step.description
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tv$1.meta(), children: step.completed && getDuration() && /* @__PURE__ */ jsxRuntime.jsx("span", { children: getDuration() }) })
        ] })
      }
    );
  })
);
exports.TodoItem = TodoItem;
//# sourceMappingURL=todo-item.cjs.map
