"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = 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 index$1 = require("../../../../../i18n/index.cjs");
const tv = require("./tv.cjs");
const coreStore = require("../../../../../stores/core-store.cjs");
const MessageAttachments = React.memo(
  React.forwardRef(function MessageAttachments2(props, ref) {
    const { attachments, className } = props;
    const [loadingImages, setLoadingImages] = React.useState(/* @__PURE__ */ new Set());
    const [errorImages, setErrorImages] = React.useState(/* @__PURE__ */ new Set());
    const [selectedAttachment, setSelectedAttachment] = React.useState(null);
    const containerRef = React.useRef(null);
    React.useEffect(() => {
      const imageIds = attachments.filter((att) => att.type === "image" && att.url).map((att) => att.id);
      setLoadingImages(new Set(imageIds));
    }, [attachments]);
    React.useEffect(() => {
      const handleKeyDown = (event) => {
        if (selectedAttachment && event.key === " ") {
          event.preventDefault();
          if (selectedAttachment.type === "image") {
            coreStore.coreActions.setAttachmentPreviewDialog(selectedAttachment);
          }
        }
      };
      document.addEventListener("keydown", handleKeyDown);
      return () => {
        document.removeEventListener("keydown", handleKeyDown);
      };
    }, [selectedAttachment]);
    index.useOnClickOutside(containerRef, () => setSelectedAttachment(null));
    const handleImageLoad = index.useEventCallback((attachmentId) => {
      setLoadingImages((prev) => {
        const newSet = new Set(prev);
        newSet.delete(attachmentId);
        return newSet;
      });
    });
    const handleImageError = index.useEventCallback((attachmentId) => {
      setErrorImages((prev) => {
        const newSet = new Set(prev);
        newSet.add(attachmentId);
        return newSet;
      });
    });
    const errorText = index$1.t("response", "attachments-error");
    if (!attachments || attachments.length === 0) return null;
    const tv$1 = tv.MessageAttachmentsTv();
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: designSystem.mergeRefs(ref, containerRef),
        className: tv$1.root({ className }),
        children: attachments.map((attachment) => {
          const displayUrl = attachment.url;
          return /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              className: tv$1.item({
                mode: attachment.type === "image" ? "image" : "file",
                isLoading: loadingImages.has(attachment.id),
                isError: errorImages.has(attachment.id),
                isSelected: selectedAttachment?.id === attachment.id
              }),
              onClick: () => {
                setSelectedAttachment(attachment);
              },
              onDoubleClick: () => {
                if (attachment.type === "image") {
                  coreStore.coreActions.setAttachmentPreviewDialog(attachment);
                }
              },
              children: attachment.type === "image" && displayUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                loadingImages.has(attachment.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tv$1.loadingContainer(), children: /* @__PURE__ */ jsxRuntime.jsx(
                  iconsReact.LoaderCircle,
                  {
                    className: "animate-spin",
                    width: 32,
                    height: 32
                  }
                ) }),
                errorImages.has(attachment.id) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tv$1.loadingContainer(), children: [
                  /* @__PURE__ */ jsxRuntime.jsx(
                    iconsReact.WarningCircle,
                    {
                      width: 32,
                      height: 32
                    }
                  ),
                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: tv$1.errorText(), children: errorText })
                ] }),
                /* @__PURE__ */ jsxRuntime.jsx(
                  "img",
                  {
                    src: displayUrl,
                    alt: attachment.name,
                    className: tv$1.image(),
                    onLoad: () => handleImageLoad(attachment.id),
                    onError: () => handleImageError(attachment.id),
                    style: { opacity: loadingImages.has(attachment.id) ? 0 : 1 }
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tv$1.imageOverlay(), children: [
                  /* @__PURE__ */ jsxRuntime.jsx(
                    designSystem.LinkButton,
                    {
                      className: tv$1.name({ mode: "image" }),
                      href: displayUrl,
                      target: "_blank",
                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: attachment.name })
                    }
                  ),
                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: tv$1.size({ mode: "image" }), children: [
                    (attachment.size / 1024).toFixed(1),
                    " KB"
                  ] })
                ] })
              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                /* @__PURE__ */ jsxRuntime.jsx("div", { className: tv$1.fileIcon(), children: /* @__PURE__ */ jsxRuntime.jsx(
                  iconsReact.File,
                  {
                    width: 32,
                    height: 32,
                    strokeWidth: 16 / 32 * 1
                  }
                ) }),
                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tv$1.fileContent(), children: [
                  /* @__PURE__ */ jsxRuntime.jsx(
                    designSystem.LinkButton,
                    {
                      className: tv$1.name({ mode: "file" }),
                      href: displayUrl,
                      target: "_blank",
                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: attachment.name })
                    }
                  ),
                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: tv$1.size({ mode: "file" }), children: designSystem.formatBytes(attachment.size) })
                ] })
              ] })
            },
            attachment.id
          );
        })
      }
    );
  })
);
exports.MessageAttachments = MessageAttachments;
//# sourceMappingURL=message-attachments.cjs.map
