import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { mergeRefs, LinkButton, formatBytes } from "@choiceform/design-system";
import { LoaderCircle, WarningCircle, File } from "@choiceform/icons-react";
import { memo, forwardRef, useState, useRef, useEffect } from "react";
import { useOnClickOutside, useEventCallback } from "../../../../../_vendor/usehooks-ts/dist-index.js";
import { t } from "../../../../../i18n/index.js";
import { MessageAttachmentsTv } from "./tv.js";
import { coreActions } from "../../../../../stores/core-store.js";
const MessageAttachments = memo(
  forwardRef(function MessageAttachments2(props, ref) {
    const { attachments, className } = props;
    const [loadingImages, setLoadingImages] = useState(/* @__PURE__ */ new Set());
    const [errorImages, setErrorImages] = useState(/* @__PURE__ */ new Set());
    const [selectedAttachment, setSelectedAttachment] = useState(null);
    const containerRef = useRef(null);
    useEffect(() => {
      const imageIds = attachments.filter((att) => att.type === "image" && att.url).map((att) => att.id);
      setLoadingImages(new Set(imageIds));
    }, [attachments]);
    useEffect(() => {
      const handleKeyDown = (event) => {
        if (selectedAttachment && event.key === " ") {
          event.preventDefault();
          if (selectedAttachment.type === "image") {
            coreActions.setAttachmentPreviewDialog(selectedAttachment);
          }
        }
      };
      document.addEventListener("keydown", handleKeyDown);
      return () => {
        document.removeEventListener("keydown", handleKeyDown);
      };
    }, [selectedAttachment]);
    useOnClickOutside(containerRef, () => setSelectedAttachment(null));
    const handleImageLoad = useEventCallback((attachmentId) => {
      setLoadingImages((prev) => {
        const newSet = new Set(prev);
        newSet.delete(attachmentId);
        return newSet;
      });
    });
    const handleImageError = useEventCallback((attachmentId) => {
      setErrorImages((prev) => {
        const newSet = new Set(prev);
        newSet.add(attachmentId);
        return newSet;
      });
    });
    const errorText = t("response", "attachments-error");
    if (!attachments || attachments.length === 0) return null;
    const tv = MessageAttachmentsTv();
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref: mergeRefs(ref, containerRef),
        className: tv.root({ className }),
        children: attachments.map((attachment) => {
          const displayUrl = attachment.url;
          return /* @__PURE__ */ jsx(
            "div",
            {
              className: tv.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") {
                  coreActions.setAttachmentPreviewDialog(attachment);
                }
              },
              children: attachment.type === "image" && displayUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
                loadingImages.has(attachment.id) && /* @__PURE__ */ jsx("div", { className: tv.loadingContainer(), children: /* @__PURE__ */ jsx(
                  LoaderCircle,
                  {
                    className: "animate-spin",
                    width: 32,
                    height: 32
                  }
                ) }),
                errorImages.has(attachment.id) && /* @__PURE__ */ jsxs("div", { className: tv.loadingContainer(), children: [
                  /* @__PURE__ */ jsx(
                    WarningCircle,
                    {
                      width: 32,
                      height: 32
                    }
                  ),
                  /* @__PURE__ */ jsx("p", { className: tv.errorText(), children: errorText })
                ] }),
                /* @__PURE__ */ jsx(
                  "img",
                  {
                    src: displayUrl,
                    alt: attachment.name,
                    className: tv.image(),
                    onLoad: () => handleImageLoad(attachment.id),
                    onError: () => handleImageError(attachment.id),
                    style: { opacity: loadingImages.has(attachment.id) ? 0 : 1 }
                  }
                ),
                /* @__PURE__ */ jsxs("div", { className: tv.imageOverlay(), children: [
                  /* @__PURE__ */ jsx(
                    LinkButton,
                    {
                      className: tv.name({ mode: "image" }),
                      href: displayUrl,
                      target: "_blank",
                      children: /* @__PURE__ */ jsx("span", { className: "truncate", children: attachment.name })
                    }
                  ),
                  /* @__PURE__ */ jsxs("p", { className: tv.size({ mode: "image" }), children: [
                    (attachment.size / 1024).toFixed(1),
                    " KB"
                  ] })
                ] })
              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                /* @__PURE__ */ jsx("div", { className: tv.fileIcon(), children: /* @__PURE__ */ jsx(
                  File,
                  {
                    width: 32,
                    height: 32,
                    strokeWidth: 16 / 32 * 1
                  }
                ) }),
                /* @__PURE__ */ jsxs("div", { className: tv.fileContent(), children: [
                  /* @__PURE__ */ jsx(
                    LinkButton,
                    {
                      className: tv.name({ mode: "file" }),
                      href: displayUrl,
                      target: "_blank",
                      children: /* @__PURE__ */ jsx("span", { className: "truncate", children: attachment.name })
                    }
                  ),
                  /* @__PURE__ */ jsx("p", { className: tv.size({ mode: "file" }), children: formatBytes(attachment.size) })
                ] })
              ] })
            },
            attachment.id
          );
        })
      }
    );
  })
);
export {
  MessageAttachments
};
//# sourceMappingURL=message-attachments.js.map
