"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("../../../../_vendor/usehooks-ts/dist-index.cjs");
const coreStore = require("../../../../stores/core-store.cjs");
const tv = require("./tv.cjs");
const index$1 = require("../../../../i18n/index.cjs");
const promptInputContext = require("../../context/prompt-input-context.cjs");
const PromptAttachmentPreview = React.forwardRef(
  function AttachmentPreview(props, ref) {
    const { className } = props;
    const { dragCtx, removeAttachment, attachmentEnabled } = promptInputContext.usePromptInputContext();
    const attachments = dragCtx?.attachments || [];
    const [selected, setSelected] = React.useState(null);
    const containerRef = React.useRef(null);
    React.useEffect(() => {
      const handleKeyDown = (event) => {
        if (selected && (event.key === "Delete" || event.key === "Backspace")) {
          event.preventDefault();
          removeAttachment(selected.id);
          setSelected(null);
        }
        if (selected && event.key === " ") {
          event.preventDefault();
          if (selected.type === "image") {
            coreStore.coreActions.setAttachmentPreviewDialog(selected);
          }
        }
      };
      document.addEventListener("keydown", handleKeyDown);
      return () => {
        document.removeEventListener("keydown", handleKeyDown);
      };
    }, [selected, removeAttachment]);
    index.useOnClickOutside(containerRef, () => setSelected(null));
    const multimodalNotSupported = index$1.t("prompt-input", "multimodal-not-supported");
    const pending = index$1.t("prompt-input", "pending");
    const uploadFailed = index$1.t("prompt-input", "upload-failed");
    const remove = index$1.t("common", "remove");
    if (attachments.length === 0) return null;
    const tv$1 = tv.PromptAttachmentPreviewTv({ isMultimodal: attachmentEnabled });
    return /* @__PURE__ */ require$$0.jsx(
      "div",
      {
        ref,
        className: designSystem.tcx(tv$1.root(), className),
        children: /* @__PURE__ */ require$$0.jsx(
          designSystem.ScrollArea,
          {
            orientation: "horizontal",
            className: tv$1.scrollArea(),
            children: /* @__PURE__ */ require$$0.jsx(
              designSystem.ScrollArea.Viewport,
              {
                className: tv$1.viewport(),
                ref: containerRef,
                children: /* @__PURE__ */ require$$0.jsx(designSystem.ScrollArea.Content, { className: tv$1.content(), children: attachments.map((attachment) => /* @__PURE__ */ require$$0.jsxs(
                  "div",
                  {
                    "data-attachment-item": true,
                    className: tv$1.item({
                      type: attachment.type,
                      selected: selected?.id === attachment.id
                    }),
                    onClick: () => {
                      setSelected(attachment);
                    },
                    onDoubleClick: () => {
                      if (attachment.type === "image") {
                        coreStore.coreActions.setAttachmentPreviewDialog(attachment);
                      }
                    },
                    children: [
                      !attachmentEnabled && /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.overlay({ overlayType: "multimodalNotSupported" }), children: [
                        /* @__PURE__ */ require$$0.jsx(iconsReact.WarningSquare, {}),
                        /* @__PURE__ */ require$$0.jsx("span", { className: tv$1.overlayText(), children: multimodalNotSupported })
                      ] }),
                      attachment.type === "image" && attachment.url ? /* @__PURE__ */ require$$0.jsx(
                        "img",
                        {
                          src: attachment.url,
                          alt: attachment.name,
                          className: tv$1.image()
                        }
                      ) : /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.file(), children: [
                        /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.fileIcon(), children: /* @__PURE__ */ require$$0.jsx(iconsReact.FileDocument, {}) }),
                        /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.fileMeta(), children: [
                          /* @__PURE__ */ require$$0.jsx("span", { className: tv$1.fileName(), children: attachment.name }),
                          /* @__PURE__ */ require$$0.jsx("span", { className: tv$1.fileSize(), children: designSystem.formatBytes(attachment.size) })
                        ] })
                      ] }),
                      attachment.uploadStatus === "pending" && /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.overlay({ overlayType: "pending" }), children: /* @__PURE__ */ require$$0.jsx("span", { className: tv$1.overlayText({ overlayType: "pending" }), children: pending }) }),
                      attachment.uploadStatus === "uploading" && /* @__PURE__ */ require$$0.jsx(require$$0.Fragment, { children: attachment.uploadProgress !== void 0 ? /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.progressBar(), children: /* @__PURE__ */ require$$0.jsx(
                        "div",
                        {
                          className: tv$1.progressFill(),
                          style: { width: `${attachment.uploadProgress}%` }
                        }
                      ) }) : /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.overlay({ overlayType: "spinner" }), children: /* @__PURE__ */ require$$0.jsx(
                        iconsReact.LoaderCircle,
                        {
                          className: "animate-spin",
                          width: 32,
                          height: 32
                        }
                      ) }) }),
                      attachment.uploadStatus === "completed" && attachment.type === "image" && attachmentEnabled && /* @__PURE__ */ require$$0.jsxs(require$$0.Fragment, { children: [
                        /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.fileType(), children: attachment.name.split(".").pop()?.toUpperCase() }),
                        /* @__PURE__ */ require$$0.jsxs("div", { className: tv$1.overlay({ overlayType: "info" }), children: [
                          /* @__PURE__ */ require$$0.jsx("p", { className: tv$1.infoName(), children: attachment.name }),
                          /* @__PURE__ */ require$$0.jsx("p", { className: tv$1.infoSize(), children: designSystem.formatBytes(attachment.size) })
                        ] })
                      ] }),
                      (attachment.error || attachment.uploadStatus === "failed") && /* @__PURE__ */ require$$0.jsx("div", { className: tv$1.overlay({ overlayType: "error" }), children: /* @__PURE__ */ require$$0.jsx("span", { className: tv$1.overlayText({ overlayType: "error" }), children: attachment.error || uploadFailed }) }),
                      /* @__PURE__ */ require$$0.jsx(
                        designSystem.IconButton,
                        {
                          variant: "reset",
                          onClick: () => removeAttachment(attachment.id),
                          className: tv$1.removeButton(),
                          tooltip: {
                            content: remove
                          },
                          children: /* @__PURE__ */ require$$0.jsx(iconsReact.RemoveTiny, {})
                        }
                      )
                    ]
                  },
                  attachment.id
                )) })
              }
            )
          }
        )
      }
    );
  }
);
exports.PromptAttachmentPreview = PromptAttachmentPreview;
//# sourceMappingURL=prompt-attachment-preview.cjs.map
