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