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