"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const designSystem = require("@choiceform/design-system");
const iconsReact = require("@choiceform/icons-react");
const React = require("react");
const index = require("../../../../i18n/index.cjs");
const tv = require("./tv.cjs");
const usePlanUpdates = require("./hooks/use-plan-updates.cjs");
const todoItem = require("./components/todo-item.cjs");
const markdown = require("../../../common/markdown/markdown.cjs");
const PromptPlanTodoList = React.memo(
  React.forwardRef(function PromptPlanTodoList2(props, ref) {
    const { className } = props;
    const { currentPlan, currentStepIndex, isExecuting } = usePlanUpdates.usePlanUpdates();
    const [expanded, setExpanded] = React.useState(true);
    const tv$1 = tv.planTodoListTv({ expanded });
    const currentStepDescription = React.useMemo(() => {
      if (!currentPlan || currentPlan.length === 0) return "";
      if (currentStepIndex == null || currentStepIndex < 0 || currentStepIndex >= currentPlan.length)
        return "";
      return currentPlan[currentStepIndex]?.description || "";
    }, [currentPlan, currentStepIndex]);
    const todoTitle = index.t("prompt-input", "todo-title");
    if (!currentPlan || currentPlan.length === 0) {
      return null;
    }
    return /* @__PURE__ */ require$$0.jsxs(
      "div",
      {
        ref,
        className: tv$1.root({ className }),
        children: [
          /* @__PURE__ */ require$$0.jsxs(
            "div",
            {
              className: tv$1.header(),
              onClick: () => {
                if (!expanded) {
                  setExpanded(true);
                }
              },
              children: [
                /* @__PURE__ */ require$$0.jsx(
                  designSystem.IconButton,
                  {
                    variant: "ghost",
                    onClick: () => setExpanded(!expanded),
                    children: expanded ? /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronDownSmall, {}) : /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronRightSmall, {})
                  }
                ),
                /* @__PURE__ */ require$$0.jsxs("h3", { className: tv$1.title(), children: [
                  todoTitle,
                  " (",
                  currentPlan.length,
                  ")"
                ] }),
                isExecuting && currentStepDescription && !expanded && /* @__PURE__ */ require$$0.jsx(
                  markdown.Markdown,
                  {
                    className: tv$1.current(),
                    components: {
                      p: ({ children }) => /* @__PURE__ */ require$$0.jsx("p", { className: "text-body-medium animate-pulse truncate [&>*]:!font-normal", children })
                    },
                    children: currentStepDescription
                  }
                )
              ]
            }
          ),
          expanded && currentPlan.length > 0 && /* @__PURE__ */ require$$0.jsx(designSystem.ScrollArea, { children: /* @__PURE__ */ require$$0.jsx(designSystem.ScrollArea.Viewport, { className: tv$1.viewport(), children: /* @__PURE__ */ require$$0.jsx(designSystem.ScrollArea.Content, { className: tv$1.content(), children: currentPlan.map((step, index2) => /* @__PURE__ */ require$$0.jsx(
            todoItem.TodoItem,
            {
              step,
              isActive: isExecuting && index2 === currentStepIndex
            },
            step.id ?? index2
          )) }) }) })
        ]
      }
    );
  })
);
exports.PromptPlanTodoList = PromptPlanTodoList;
//# sourceMappingURL=prompt-plan-todo-list.cjs.map
