import { jsxs, jsx } from "react/jsx-runtime";
import { tcv, tcx, MdRender } from "@choiceform/design-system";
import { PromptMessageReasoning, ChevronDownSmall, ChevronRightSmall } from "@choiceform/icons-react";
import { memo, useState, useRef, useEffect } from "react";
import { useEventCallback } from "../../../../../_vendor/usehooks-ts/dist-index.js";
import { t } from "../../../../../i18n/index.js";
import { TextShimmerLoader } from "../../../../common/text-shimmer-loader/text-shimmer-loader.js";
const reasoningTv = tcv({
  slots: {
    root: "text-secondary-foreground flex flex-col gap-2",
    header: "text-message flex items-center gap-1",
    icon: "text-icon-secondary flex size-5 items-center justify-center",
    button: "text-secondary-foreground hover:text-default-foreground flex items-center gap-1",
    content: "pl-1"
  },
  variants: {
    state: {
      thinking: {},
      completed: {}
    }
  },
  defaultVariants: {
    state: "thinking"
  }
});
const MessageReasoning = memo(function MessageReasoning2(props) {
  const { className, children, isStreaming = false, startTime, endTime, onToggleCollapse } = props;
  const [thoughtFor, setThoughtFor] = useState(void 0);
  const [displayContent, setDisplayContent] = useState("");
  const [isExpanded, setIsExpanded] = useState(true);
  const streamingRef = useRef();
  const wasStreamingRef = useRef(isStreaming);
  const content = typeof children === "string" ? children : "";
  const reasoningThinking = t("response", "reasoning-thinking");
  const reasoningThoughtFor = t("response", "reasoning-thought-for", {
    thoughtFor
  });
  useEffect(() => {
    if (wasStreamingRef.current && !isStreaming) {
      setTimeout(() => {
        setIsExpanded(false);
      }, 600);
    }
    wasStreamingRef.current = isStreaming;
  }, [isStreaming]);
  useEffect(() => {
    if (!isStreaming && startTime && endTime) {
      const duration = endTime.getTime() - startTime.getTime();
      const seconds = duration / 1e3;
      setThoughtFor(Math.round(seconds * 10) / 10);
    }
  }, [isStreaming, startTime, endTime]);
  useEffect(() => {
    if (isStreaming && content) {
      if (streamingRef.current) {
        clearInterval(streamingRef.current);
      }
      let currentIndex = displayContent.length;
      const targetLength = content.length;
      if (currentIndex < targetLength) {
        streamingRef.current = window.setInterval(() => {
          currentIndex += Math.min(3, targetLength - currentIndex);
          setDisplayContent(content.slice(0, currentIndex));
          if (currentIndex >= targetLength) {
            clearInterval(streamingRef.current);
          }
        }, 10);
      } else {
        setDisplayContent(content);
      }
    } else if (!isStreaming) {
      setDisplayContent(content);
    }
    return () => {
      if (streamingRef.current) {
        clearInterval(streamingRef.current);
      }
    };
  }, [content, isStreaming, displayContent.length]);
  const handleToggle = useEventCallback(() => {
    if (!isStreaming) {
      setIsExpanded(!isExpanded);
      if (onToggleCollapse) {
        onToggleCollapse();
      }
    }
  });
  const tv = reasoningTv({
    state: isStreaming ? "thinking" : "completed"
  });
  return /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
    /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
      /* @__PURE__ */ jsx("div", { className: tv.icon(), children: /* @__PURE__ */ jsx(PromptMessageReasoning, {}) }),
      isStreaming && /* @__PURE__ */ jsx(TextShimmerLoader, { children: reasoningThinking }),
      !isStreaming && thoughtFor !== void 0 && /* @__PURE__ */ jsxs(
        "button",
        {
          className: tv.button(),
          onClick: handleToggle,
          children: [
            reasoningThoughtFor,
            isExpanded ? /* @__PURE__ */ jsx(ChevronDownSmall, {}) : /* @__PURE__ */ jsx(ChevronRightSmall, {})
          ]
        }
      )
    ] }),
    (isStreaming || isExpanded && displayContent) && /* @__PURE__ */ jsx("div", { className: tv.content(), children: /* @__PURE__ */ jsx(
      MdRender,
      {
        content: displayContent,
        size: "small"
      }
    ) })
  ] });
});
export {
  MessageReasoning
};
//# sourceMappingURL=message-reasoning.js.map
