import { defineComponent as de, inject as fe, ref as f, watch as N, nextTick as A, onMounted as ve, onUnmounted as be, computed as k, createElementBlock as u, openBlock as i, normalizeStyle as U, normalizeClass as v, unref as a, createCommentVNode as n, createElementVNode as l, createBlock as b, createVNode as r, withCtx as d, createTextVNode as he, toDisplayString as L, Transition as x, withModifiers as D, Teleport as ye } from "vue";
import we from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
import pe from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
import ke from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
import xe from "../BaseReplyMessage/BaseReplyMessage.vue.js";
import Re from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
import Me from "../MessageReactions/MessageReactions.vue.js";
import Ce from "../MessageStatusIndicator/MessageStatusIndicator.vue.js";
import Te from "../MessageSmsInvite/MessageSmsInvite.vue.js";
import Se from "../../1_atoms/Tooltip/Tooltip.vue.js";
import { useMessageActions as Ie } from "../../../hooks/messages/useMessageActions.js";
import { useMessageLinks as je } from "../../../hooks/messages/useMessageLinks.js";
import { useChannelAccentColor as Ae } from "../../../hooks/messages/useChannelAccentColor.js";
import { useSubtextTooltip as Le } from "../../../hooks/messages/useSubtextTooltip.js";
import { getStatus as Ee, getStatusTitle as Be } from "../../../functions/getStatusMessage.js";
import { getMessageClass as Oe } from "../../../functions/getMessageClass.js";
import { createReactionHandlers as ze } from "../../../functions/createReactionHandlers.js";
import "../../../functions/parseMarkdown.js";
import "../../../hooks/useMessageDraft.js";
import "../../../hooks/useSearchModel.js";
import { useTheme as Fe } from "../../../hooks/useTheme.js";
/* empty css                              */
/* empty css                                              */
const Ve = ["messageId"], He = ["src"], We = {
  key: 1,
  class: "image-message__subtext"
}, $e = {
  key: 0,
  class: "image-message__blur-wrapper"
}, Ne = ["src", "alt"], Ue = ["src", "alt"], De = ["src", "alt"], Pe = {
  key: 0,
  class: "image-message__info-container"
}, qe = { class: "image-message__time" }, Ge = ["innerHTML"], Je = ["src", "alt"], hs = /* @__PURE__ */ de({
  __name: "ImageMessage",
  props: {
    message: {
      type: Object,
      required: !0
    },
    applyStyle: {
      type: Function,
      default: () => null
    },
    isFirstInSeries: {
      type: Boolean,
      default: !0
    },
    reactionsEnabled: {
      type: Boolean,
      default: !0
    },
    subtextTooltipData: {
      type: Object,
      required: !1,
      default: () => ({})
    },
    channel: {
      type: String,
      required: !1,
      default: void 0
    }
  },
  emits: ["action", "reply", "sms-invite"],
  setup(e, { emit: P }) {
    const q = fe("chatAppId"), { getTheme: E } = Fe(q), s = e, C = P, T = f(!1), {
      isOpenMenu: S,
      buttonMenuVisible: G,
      showMenu: J,
      hideMenu: K,
      clickAction: Q,
      viewsAction: B,
      handleClickReplied: X
    } = Ie(s.message, C), R = f(!1), { linkedHtml: O, inNewWindow: z } = je(() => s.message.text), c = f(null), g = f(null), h = f(0), I = f(0);
    N(
      () => O.value,
      () => {
        y(), A(() => {
          o && g.value && o.observe(g.value);
        });
      }
    );
    const y = () => {
      A(() => {
        c.value && (h.value = c.value.offsetWidth), g.value && (I.value = g.value.offsetWidth);
      });
    };
    let o = null, M = null;
    ve(() => {
      y(), M = () => y(), window.addEventListener("resize", M), typeof ResizeObserver < "u" && (o = new ResizeObserver(() => {
        y();
      }), c.value && o.observe(c.value), g.value && o.observe(g.value));
    }), be(() => {
      M && window.removeEventListener("resize", M), o && o.disconnect();
    }), N(
      () => [s.message.text, s.message.url],
      () => {
        y(), A(() => {
          o && (o.disconnect(), c.value && o.observe(c.value), g.value && o.observe(g.value));
        });
      },
      { immediate: !0 }
    );
    const F = k(() => s.message.text && I.value > h.value && h.value > 0), Y = () => {
      J(), R.value = !0;
    }, V = () => {
      K(), R.value = !1;
    }, Z = k(() => s.message.reply && s.message.text ? "0" : s.message.text ? I.value > h.value && h.value > 0 ? "0" : "8px 8px 0 0" : s.message.reply ? "0 0 8px 8px" : "8px"), _ = k(() => Ee(s.message.status)), ee = k(() => Be(s.message.status, s.message.statusMsg)), { bubbleStyle: se } = Ae(
      k(() => s.message),
      { cssVariable: "--chotto-imagemessage-right-bg", position: "right" }
    );
    function H(w) {
      return Oe(w.position, "image-message");
    }
    const te = () => T.value = !1, ae = async () => {
      var w, t;
      if (s.message.url)
        try {
          const m = await fetch(s.message.url, {
            headers: {
              Accept: "image/*"
            }
          }), ge = m.headers.get("content-type") || "", ue = await m.blob(), j = ((t = (w = s.message.url.split(".").pop()) == null ? void 0 : w.split("?")[0]) == null ? void 0 : t.toLowerCase()) || "", re = {
            "image/jpeg": "jpg",
            "image/jpg": "jpg",
            "image/png": "png",
            "image/gif": "gif",
            "image/webp": "webp",
            "image/svg+xml": "svg",
            "image/bmp": "bmp"
          };
          let W = j && ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(j) ? j : re[ge] || "jpg";
          const ce = s.message.alt ? s.message.alt.includes(".") ? s.message.alt : `${s.message.alt}.${W}` : `image-${s.message.messageId}.${W}`, $ = window.URL.createObjectURL(ue), p = document.createElement("a");
          p.href = $, p.download = ce, document.body.appendChild(p), p.click(), document.body.removeChild(p), window.URL.revokeObjectURL($);
        } catch (m) {
          console.error("Ошибка при скачивании изображения:", m);
        }
    }, { onToggleReaction: ie, onAddReaction: ne, onRemoveReaction: le } = ze(C), oe = Le(() => s.message, () => s.subtextTooltipData);
    function me() {
      C("sms-invite", s.message);
    }
    return (w, t) => (i(), u("div", {
      class: v(["image-message", [
        H(e.message),
        e.applyStyle(e.message)
      ]]),
      messageId: e.message.messageId,
      style: U(a(se)),
      onMouseleave: V
    }, [
      e.message.avatar && e.isFirstInSeries ? (i(), u("img", {
        key: 0,
        class: "image-message__avatar",
        src: e.message.avatar,
        height: "32",
        width: "32"
      }, null, 8, He)) : n("", !0),
      e.message.subText && e.isFirstInSeries ? (i(), u("p", We, [
        r(Se, {
          text: a(oe),
          position: e.message.position === "left" ? "right" : "left",
          offset: 8
        }, {
          default: d(() => [
            he(L(e.message.subText), 1)
          ]),
          _: 1
        }, 8, ["text", "position"])
      ])) : n("", !0),
      l("div", {
        class: v(["image-message__content", { "is-first": e.isFirstInSeries, "with-avatar-indent": !e.isFirstInSeries && e.message.avatar }])
      }, [
        e.message.reply ? (i(), b(xe, {
          key: 0,
          style: { margin: "10px 10px 4px 16px" },
          class: v(e.message.position),
          message: e.message.reply,
          onReply: a(X)
        }, null, 8, ["class", "message", "onReply"])) : n("", !0),
        l("div", {
          class: v(["image-message__preview-button", { "image-message__preview-button--blur-edges": F.value }]),
          onClick: t[1] || (t[1] = (m) => T.value = !0),
          onMouseenter: Y,
          onMouseleave: V
        }, [
          F.value ? (i(), u("div", $e, [
            l("img", {
              class: "image-message__blur-left",
              src: e.message.url,
              alt: e.message.alt
            }, null, 8, Ne),
            l("img", {
              class: "image-message__blur-right",
              src: e.message.url,
              alt: e.message.alt
            }, null, 8, Ue)
          ])) : n("", !0),
          l("img", {
            ref_key: "imageRef",
            ref: c,
            class: "image-message__preview-image",
            style: U({ borderRadius: Z.value }),
            src: e.message.url,
            alt: e.message.alt
          }, null, 12, De),
          r(x, { name: "modal-fade" }, {
            default: d(() => [
              R.value ? (i(), u("div", Pe, [
                e.message.views ? (i(), u("div", {
                  key: 0,
                  class: "image-message__views",
                  onClick: t[0] || (t[0] = D(
                    //@ts-ignore
                    (...m) => a(B) && a(B)(...m),
                    ["stop"]
                  ))
                }, [
                  t[4] || (t[4] = l("span", { class: "pi pi-eye" }, null, -1)),
                  l("p", null, L(e.message.views), 1)
                ])) : n("", !0),
                l("span", qe, L(e.message.time), 1),
                r(Ce, {
                  "base-class": "image-message",
                  "message-class": H(e.message),
                  "message-status": e.message.status,
                  "status-class": _.value,
                  "status-title": ee.value
                }, null, 8, ["message-class", "message-status", "status-class", "status-title"])
              ])) : n("", !0)
            ]),
            _: 1
          }),
          r(x, { name: "modal-fade" }, {
            default: d(() => [
              R.value ? (i(), u("button", {
                key: 0,
                class: "image-message__download-button",
                onClick: D(ae, ["stop"])
              }, [...t[5] || (t[5] = [
                l("span", { class: "pi pi-download" }, null, -1)
              ])])) : n("", !0)
            ]),
            _: 1
          })
        ], 34),
        r(x, { name: "modal-fade" }, {
          default: d(() => [
            a(G) && e.message.actions ? (i(), u("button", {
              key: 0,
              class: "image-message__menu-button",
              onClick: t[2] || (t[2] = (m) => S.value = !a(S))
            }, [...t[6] || (t[6] = [
              l("span", { class: "pi pi-ellipsis-h" }, null, -1)
            ])])) : n("", !0)
          ]),
          _: 1
        }),
        r(x, { name: "context-menu" }, {
          default: d(() => [
            a(S) && e.message.actions ? (i(), b(we, {
              key: 0,
              class: "image-message__context-menu",
              actions: e.message.actions,
              onClick: a(Q)
            }, null, 8, ["actions", "onClick"])) : n("", !0)
          ]),
          _: 1
        }),
        e.message.text ? (i(), u("div", {
          key: 1,
          ref_key: "textRef",
          ref: g,
          class: "image-message__text-container"
        }, [
          l("p", {
            onClick: t[3] || (t[3] = //@ts-ignore
            (...m) => a(z) && a(z)(...m)),
            innerHTML: a(O)
          }, null, 8, Ge)
        ], 512)) : n("", !0),
        r(Te, {
          status: e.message.status,
          "has-messenger-account": e.message.hasMessengerAccount,
          channel: e.channel,
          onSmsInvite: me
        }, null, 8, ["status", "has-messenger-account", "channel"]),
        e.message.linkPreview ? (i(), b(pe, {
          key: 2,
          class: v(["image-message__link-preview", e.message.position]),
          "link-preview": e.message.linkPreview
        }, null, 8, ["class", "link-preview"])) : n("", !0),
        e.message.embed ? (i(), b(ke, {
          key: 3,
          class: v(e.message.position),
          embed: e.message.embed
        }, null, 8, ["class", "embed"])) : n("", !0),
        r(Me, {
          reactions: e.message.reactions,
          "message-id": e.message.messageId,
          enabled: e.reactionsEnabled,
          onToggleReaction: a(ie),
          onAddReaction: a(ne),
          onRemoveReaction: a(le)
        }, null, 8, ["reactions", "message-id", "enabled", "onToggleReaction", "onAddReaction", "onRemoveReaction"])
      ], 2),
      (i(), b(ye, { to: "body" }, [
        r(x, { name: "modal-fade" }, {
          default: d(() => [
            T.value ? (i(), b(Re, {
              key: 0,
              "data-theme": a(E)().theme ? a(E)().theme : "light",
              title: e.message.alt,
              onClose: te
            }, {
              default: d(() => [
                l("img", {
                  class: "image-message__modal-image",
                  src: e.message.url,
                  alt: e.message.alt
                }, null, 8, Je)
              ]),
              _: 1
            }, 8, ["data-theme", "title"])) : n("", !0)
          ]),
          _: 1
        })
      ]))
    ], 46, Ve));
  }
});
export {
  hs as default
};
