import { jsx, jsxs } from "react/jsx-runtime";
import { LoaderCircle, CircleRemove, CircleCirclehecirclek } from "@choiceform/icons-react";
import { memo, forwardRef } from "react";
import { todoItemTv } from "../tv.js";
import { MdRender } from "@choiceform/design-system";
import { intervalToDuration } from "../../../../../_vendor/date-fns/intervalToDuration.js";
const TodoItem = memo(
  forwardRef(function TodoItem2(props, ref) {
    const { step, isActive, className } = props;
    const state = step.failed ? "failed" : step.completed ? "completed" : isActive ? "active" : "pending";
    const 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({ 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__ */ jsx(CircleCirclehecirclek, {});
        case "failed":
          return /* @__PURE__ */ jsx(CircleRemove, {});
        case "pending":
          return /* @__PURE__ */ jsx("div", { className: tv.queueIcon() });
        case "active":
          return /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" });
      }
    };
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: tv.root({ className }),
        children: /* @__PURE__ */ jsxs("div", { className: tv.content(), children: [
          /* @__PURE__ */ jsx("div", { className: tv.icon(), children: renderIcon() }),
          /* @__PURE__ */ jsx(
            MdRender,
            {
              className: tv.markdown(),
              components: {
                p: ({ children }) => /* @__PURE__ */ jsx("p", { className: tv.text(), children })
              },
              content: step.description
            }
          ),
          /* @__PURE__ */ jsx("div", { className: tv.meta(), children: step.completed && getDuration() && /* @__PURE__ */ jsx("span", { children: getDuration() }) })
        ] })
      }
    );
  })
);
export {
  TodoItem
};
//# sourceMappingURL=todo-item.js.map
