import { jsxs, jsx } from "react/jsx-runtime";
import { tcx, IconButton, ScrollArea } from "@choiceform/design-system";
import { ChevronDownSmall, ChevronRightSmall } from "@choiceform/icons-react";
import { observer, use$ as useSelector } from "../../../../_vendor/@legendapp/state/react.js";
import { useCallback, useState } from "react";
import { t } from "../../../../i18n/index.js";
import { QueueItem } from "./components/queue-item.js";
import { messageQueueVariants } from "./tv.js";
import { usePromptInputContext } from "../../context/prompt-input-context.js";
import { queueStore$, queueActions } from "../../../../stores/queue-store.js";
import { usePanelDragDrop } from "./hooks/use-message-queue-drag.js";
import { streamingComputed$, streamingActions } from "../../../../stores/streaming-store.js";
import { messageActions } from "../../../../stores/message-store.js";
const PromptMessageQueue = observer(function PromptMessageQueue2(props) {
  const { className, ...rest } = props;
  const { sendJumpQueueMessage } = usePromptInputContext();
  const pendingMessages = useSelector(queueStore$.pendingQueue);
  const streamingStatus = useSelector(streamingComputed$.streamingStatus);
  const handleJumpQueue = (messageId) => {
    if (streamingStatus.isStreaming && streamingStatus.currentMessageId) {
      messageActions.cancelStreamingMessage(streamingStatus.currentMessageId);
      streamingActions.stopStreaming();
    }
    sendJumpQueueMessage?.(messageId);
  };
  const handleDrop = useCallback(
    (dragId, dropId, position) => {
      const items = [...pendingMessages];
      const dragIndex = items.findIndex((item) => item.id === dragId);
      const dropIndex = items.findIndex((item) => item.id === dropId);
      if (dragIndex === -1 || dropIndex === -1) {
        return;
      }
      const isDraggingToSamePosition = dragId === dropId || position === "top" && dragIndex === dropIndex - 1 || position === "bottom" && dragIndex === dropIndex + 1;
      if (isDraggingToSamePosition) {
        return;
      }
      let newIndex = dropIndex;
      if (position === "bottom") {
        newIndex = dropIndex + 1;
      }
      if (dragIndex < newIndex) {
        newIndex = newIndex - 1;
      }
      queueActions.movePendingMessage(dragIndex, newIndex);
    },
    [pendingMessages]
  );
  const {
    containerRef,
    isDragging,
    isItemBeingDragged,
    isDropTarget,
    getDropPosition,
    handleDragStart
  } = usePanelDragDrop({
    onDrop: handleDrop
  });
  const [expanded, setExpanded] = useState(true);
  const handleMouseDown = useCallback(
    (messageId, e) => {
      e.stopPropagation();
      const element = document.querySelector(`[data-row-id="${messageId}"]`);
      if (!element) return;
      handleDragStart({ id: messageId, element }, e);
    },
    [handleDragStart]
  );
  const tv = messageQueueVariants({
    expanded
  });
  const pendingMessagesText = t("prompt-input", "pending-messages");
  if (pendingMessages.length === 0) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: containerRef,
      className: tcx(tv.root(), className),
      ...rest,
      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("span", { className: tv.title(), children: [
                pendingMessagesText,
                " (",
                pendingMessages.length,
                ")"
              ] })
            ]
          }
        ),
        expanded && pendingMessages.length > 0 && /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { className: tv.viewport(), children: /* @__PURE__ */ jsx(ScrollArea.Content, { className: tv.content(), children: pendingMessages.map((message) => {
          const isBeingDragged = isItemBeingDragged(message.id);
          const dropPosition = getDropPosition(message.id);
          return /* @__PURE__ */ jsx(
            "div",
            {
              className: tv.itemContainer(),
              "data-row-id": message.id,
              "data-drop-target": isDropTarget(message.id),
              "data-drop-position": dropPosition || "",
              children: /* @__PURE__ */ jsx(
                QueueItem,
                {
                  message,
                  isDragging,
                  isBeingDragged,
                  onDragStart: (e) => handleMouseDown(message.id, e),
                  onRemove: () => queueActions.removePendingMessage(message.id),
                  onJumpQueue: () => handleJumpQueue(message.id)
                }
              )
            },
            message.id
          );
        }) }) }) })
      ]
    }
  );
});
export {
  PromptMessageQueue
};
//# sourceMappingURL=prompt-message-queue.js.map
