import { jsxs as o, Fragment as b, jsx as e } from "react/jsx-runtime";
import { mr2 as I } from "./index-general.module.js";
import { classNames as i } from "./index-classNames.js";
import { Icon as L, IconSize as N } from "./index-Icon.js";
import { IconNames as d } from "./index-IconNames.js";
import { Render as R } from "./index-Render.js";
import { Skeleton as S, SkeletonTypes as k } from "./index-Skeleton.js";
import { Text as v, TextTypes as w } from "./index-Text.js";
import { useState as j, useRef as C, useEffect as W } from "react";
import t from "./index-ImgWithLoader.module.scss.js";
const J = (c) => {
  const {
    shouldShow: p,
    isLoading: r,
    showMediaType: f = !1,
    mediaType: h = "photo",
    additionalText: g,
    useBorderRadius: y = !0,
    ...n
  } = c, {
    width: u,
    height: x
  } = n, [s, T] = j(!0), a = C(null);
  W(() => {
    var m;
    (m = a.current) != null && m.complete && l();
  }, []);
  const l = () => {
    T(!1);
  };
  return p === !1 ? null : o(b, {
    children: [e("div", {
      style: {
        display: !r && !s ? "none" : "block"
      },
      children: e(S, {
        type: k.fill,
        style: {
          height: x ?? "192px",
          width: u ?? "100%",
          minWidth: "calc(33.33% - 16px)"
        },
        className: i(I)
      })
    }), o("div", {
      style: {
        display: r || s ? "none" : "block"
      },
      className: i(t.imageContainer, y && t.borderRadius),
      children: [e(R, {
        if: f,
        children: o("div", {
          className: i(t.mediaTypeInfo),
          children: [e(v, {
            color: "--fn-bg",
            type: w.textCaption,
            children: g
          }), e(L, {
            color: "--fn-bg",
            type: N.large,
            children: h === "video" ? d.media : d.image
          })]
        })
      }), e("img", {
        ...n,
        onLoad: l,
        ref: a,
        decoding: "async"
      })]
    })]
  });
};
export {
  J as ImgWithLoader
};
