import { jsx as d, jsxs as q } from "react/jsx-runtime";
import { useRef as J, useState as v, useContext as Q, useEffect as u } from "react";
import { useTranslation as X } from "react-i18next";
import { l as Y, o as Z, C as K, m as P, u as ee, a as te, b as L, $ as S, t as ie, U as oe, I as ne, c as ae, E as se, R as re, d as le } from "./layers.wyaZ1wNd.js";
import { LoadingOverlay as de } from "@mantine/core";
import { showErrorNotification as he } from "@layers-app/shared";
const $ = (t) => {
  const {
    width: m,
    height: s,
    isLoading: n,
    isError: h,
    src: f,
    id: c,
    altText: p,
    imageRef: I,
    maxWidth: g
  } = t;
  return /* @__PURE__ */ q(
    "div",
    {
      className: "media-wrapper",
      style: {
        width: m,
        height: s,
        display: "inline-flex",
        position: "relative"
      },
      children: [
        /* @__PURE__ */ d(
          de,
          {
            visible: n,
            zIndex: 1e3,
            overlayProps: { backgroundOpacity: 0.5 },
            loaderProps: { size: 24, color: "black" }
          }
        ),
        /* @__PURE__ */ d(
          ge,
          {
            className: null,
            src: f,
            altText: p,
            imageRef: I,
            width: "inherit",
            height: "inherit",
            maxWidth: g || "auto",
            id: c
          }
        )
      ]
    }
  );
};
function ge({
  altText: t,
  className: m,
  imageRef: s,
  src: n,
  width: h,
  height: f,
  maxWidth: c,
  id: p
}) {
  const [I, g] = v(!1);
  return /* @__PURE__ */ d(
    "img",
    {
      className: `${m || void 0} ${I ? "" : "loading"}`,
      src: n,
      alt: t,
      ref: s,
      style: {
        height: f,
        maxWidth: c,
        width: h
      },
      onLoad: () => {
        n.includes("splash") ? setTimeout(() => {
          g(!0);
        }, 100) : g(!0);
      },
      draggable: "false",
      "data-id": p
    }
  );
}
function xe({
  src: t,
  altText: m,
  nodeKey: s,
  width: n,
  height: h,
  maxWidth: f,
  showCaption: c,
  caption: p,
  id: I,
  create: g,
  alignment: T
}) {
  var D, _;
  const R = J(null), [E, x] = v(!0), { isCollabActive: A } = Y(), [l] = Z(), [w, W] = v(!0), [r, z] = v({
    width: 0,
    height: 0
  }), { fetchUploadMedia: M, fetchDeleteMedia: O, maxFileSize: ue } = Q(K), b = P.has(t) && (((D = P.get(t)) == null ? void 0 : D.mediaNodeKeys.length) === 0 || ((_ = P.get(t)) == null ? void 0 : _.mediaNodeKeys.length) === void 0 || t.trim() === ""), { t: y } = X(), [me, j] = v(0);
  u(() => l.registerDecoratorListener(() => {
    j((e) => e + 1);
  }), [b]), u(() => {
    if (!t || t.startsWith("data:image/") || !t.trim()) {
      x(!1);
      return;
    }
    const e = new Image();
    e.src = t, e.onload = () => x(!1), e.onerror = () => {
      x(!1);
    };
  }, [t, b]);
  const B = (e, i) => {
    l.update(() => {
      le(null);
      const o = L(s);
      S(o) && o.setWidthAndHeight(e, i);
    });
  }, { historyState: U } = ee(), {
    settings: { showNestedEditorTreeView: k }
  } = te(), [N, C] = v(!1);
  function G(e) {
    return e.endsWith(".svg") || e.includes("image/svg+xml");
  }
  function V(e) {
    return new Promise((i, o) => {
      if (G(e)) {
        i(0);
        return;
      }
      const a = new Image();
      a.src = e, a.onload = () => {
        i(a.width);
      }, a.onerror = () => {
        o(new Error("Failed to load image"));
      };
    });
  }
  u(() => {
    g && C(!0);
  }, [g]), u(() => {
    let e = n, i = h, o = 100;
    (t.includes("unsplash") ? t.trim() : !b && t.trim() || t.includes("upload-src-editor")) && t !== "upload" && V(t).then((a) => {
      typeof e == "number" && e < o && a < o ? (W(!0), z({
        width: e,
        height: i
      })) : a < o ? (W(!0), z({
        width: "auto",
        height: "auto"
      })) : (z({
        width: a,
        height: a
      }), W(!1));
    }).catch((a) => {
      console.warn("Ошибка при загрузке изображения:", a.message);
    });
  }, [t, b]), u(() => {
    r.width && r.height && w && l.update(() => {
      const e = L(s);
      S(e) && e.setWidthAndHeight(r.width, r.height);
    });
  }, [r.width, r.height, w]), u(() => {
    const e = document.documentElement;
    ie(N, e);
  }, [N]), u(() => l.registerCommand(
    oe,
    (e) => (t === "upload" && H(e), !1),
    ne
  ), [t, E]);
  const F = (e, i) => {
    x(!1), l.update(() => {
      const o = L(s);
      S(o) && (o.setSrc(e), o.setId(i));
    });
  }, H = (e) => {
    x(!0), M && M(
      e[0],
      (i, o) => {
        F(i, o);
      },
      (i) => {
        i && he({
          message: y("editor.gallery.errorFile")
        }), F("", "");
      }
    );
  };
  return !t || t === "upload" ? /* @__PURE__ */ d(
    ae,
    {
      uploading: !1,
      onUpload: (e) => {
        !M || !e.length || (H(e), C(!1));
      },
      popoverProps: {
        opened: N,
        position: "bottom",
        onChange: C
      },
      onChange: (e) => {
        C(!1), l.update(() => {
          const i = L(s);
          S(i) && i.setSrc(e);
        });
      },
      children: /* @__PURE__ */ d(
        se,
        {
          title: y("editor.image.add_photo"),
          icon: "photo",
          onClick: () => C(!N),
          isLoading: E
        }
      )
    }
  ) : w ? /* @__PURE__ */ d(
    $,
    {
      width: r.width,
      height: r.height,
      isLoading: E,
      isError: !1,
      isIcon: w,
      src: t,
      id: I,
      editor: l,
      nodeKey: s,
      fetchDeleteMedia: O,
      altText: m,
      imageRef: R,
      maxWidth: f,
      showCaption: c,
      caption: p,
      isCollabActive: A,
      historyState: U,
      showNestedEditorTreeView: k,
      t: y
    }
  ) : /* @__PURE__ */ d(
    re,
    {
      editor: l,
      isIcon: w,
      width: typeof n == "string" && n.includes("%") ? parseFloat(n) : n,
      height: typeof h == "string" && h.includes("%") ? parseFloat(h) : n,
      initialWidth: r.width || "",
      initialHeight: r.height || "",
      onResizeEnd: B,
      alignment: T,
      children: /* @__PURE__ */ d(
        $,
        {
          width: "inherit",
          height: "inherit",
          isLoading: E,
          isError: !1,
          isIcon: w,
          src: t,
          id: I,
          editor: l,
          nodeKey: s,
          fetchDeleteMedia: O,
          altText: m,
          imageRef: R,
          maxWidth: f,
          showCaption: c,
          caption: p,
          isCollabActive: A,
          historyState: U,
          showNestedEditorTreeView: k,
          t: y
        }
      )
    }
  );
}
export {
  xe as default
};
