"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("../../../../_vendor/@legendapp/state/react.cjs");
const React = require("react");
const index = require("../../../../i18n/index.cjs");
const queueItem = require("./components/queue-item.cjs");
const tv = require("./tv.cjs");
const promptInputContext = require("../../context/prompt-input-context.cjs");
const queueStore = require("../../../../stores/queue-store.cjs");
const useMessageQueueDrag = require("./hooks/use-message-queue-drag.cjs");
const streamingStore = require("../../../../stores/streaming-store.cjs");
const messageStore = require("../../../../stores/message-store.cjs");
const PromptMessageQueue = react.observer(function PromptMessageQueue2(props) {
  const { className, ...rest } = props;
  const { sendJumpQueueMessage } = promptInputContext.usePromptInputContext();
  const pendingMessages = react.use$(queueStore.queueStore$.pendingQueue);
  const streamingStatus = react.use$(streamingStore.streamingComputed$.streamingStatus);
  const handleJumpQueue = (messageId) => {
    if (streamingStatus.isStreaming && streamingStatus.currentMessageId) {
      messageStore.messageActions.cancelStreamingMessage(streamingStatus.currentMessageId);
      streamingStore.streamingActions.stopStreaming();
    }
    sendJumpQueueMessage?.(messageId);
  };
  const handleDrop = React.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;
      }
      queueStore.queueActions.movePendingMessage(dragIndex, newIndex);
    },
    [pendingMessages]
  );
  const {
    containerRef,
    isDragging,
    isItemBeingDragged,
    isDropTarget,
    getDropPosition,
    handleDragStart
  } = useMessageQueueDrag.usePanelDragDrop({
    onDrop: handleDrop
  });
  const [expanded, setExpanded] = React.useState(true);
  const handleMouseDown = React.useCallback(
    (messageId, e) => {
      e.stopPropagation();
      const element = document.querySelector(`[data-row-id="${messageId}"]`);
      if (!element) return;
      handleDragStart({ id: messageId, element }, e);
    },
    [handleDragStart]
  );
  const tv$1 = tv.messageQueueVariants({
    expanded
  });
  const pendingMessagesText = index.t("prompt-input", "pending-messages");
  if (pendingMessages.length === 0) {
    return null;
  }
  return /* @__PURE__ */ require$$0.jsxs(
    "div",
    {
      ref: containerRef,
      className: designSystem.tcx(tv$1.root(), className),
      ...rest,
      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("span", { className: tv$1.title(), children: [
                pendingMessagesText,
                " (",
                pendingMessages.length,
                ")"
              ] })
            ]
          }
        ),
        expanded && pendingMessages.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: pendingMessages.map((message) => {
          const isBeingDragged = isItemBeingDragged(message.id);
          const dropPosition = getDropPosition(message.id);
          return /* @__PURE__ */ require$$0.jsx(
            "div",
            {
              className: tv$1.itemContainer(),
              "data-row-id": message.id,
              "data-drop-target": isDropTarget(message.id),
              "data-drop-position": dropPosition || "",
              children: /* @__PURE__ */ require$$0.jsx(
                queueItem.QueueItem,
                {
                  message,
                  isDragging,
                  isBeingDragged,
                  onDragStart: (e) => handleMouseDown(message.id, e),
                  onRemove: () => queueStore.queueActions.removePendingMessage(message.id),
                  onJumpQueue: () => handleJumpQueue(message.id)
                }
              )
            },
            message.id
          );
        }) }) }) })
      ]
    }
  );
});
exports.PromptMessageQueue = PromptMessageQueue;
//# sourceMappingURL=prompt-message-queue.cjs.map
