import { jsx as s, jsxs as i, Fragment as z } from "react/jsx-runtime";
import { useState as F } from "react";
import r from "../../utils/classNames.js";
import { noop as a } from "es-toolkit/function";
import R from "./Dialog.js";
import Y from "../video/ResponsiveVideo.js";
import c from "../preloader/ImagePreloader.js";
import j from "../spinner/Spinner.js";
const m = (o) => {
  const {
    show: h = !1,
    onClose: N = a,
    disableEsc: b = !1,
    useOverflow: f = !1,
    bsSize: x = "lg",
    media: l = [],
    previousButtonText: v = "Prev",
    previousButtonCallback: y = a,
    nextButtonText: I = "Next",
    nextButtonCallback: C = a,
    className: d,
    ...E
  } = o, [n, p] = F(0), T = () => {
    const e = n, t = e === 0 ? o.media.length - 1 : e - 1;
    p(t), y(t);
  }, A = () => {
    const e = n, t = e === o.media.length - 1 ? 0 : e + 1;
    p(t), C(t);
  }, M = () => /* @__PURE__ */ s("div", { className: "text-center text-size-h3", children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-missing text-size-200pct text-color-gray" }) }), S = (e) => {
    const t = r("img-responsive", e.className && e.className);
    return (
      // @ts-expect-error
      /* @__PURE__ */ s(c, { src: e.src, className: t, children: ({ status: u, image: g }) => u === c.STATUS_LOADED ? /* @__PURE__ */ s("img", { className: "ani-fade-in", src: g.src }, g.src) : u === c.STATUS_FAILED ? M() : /* @__PURE__ */ s(j, { isInverse: !1 }) })
    );
  }, _ = (e) => {
    const t = r(e.className && e.className);
    return /* @__PURE__ */ s("div", { className: "flex-1-0", children: /* @__PURE__ */ s(
      Y,
      {
        src: e.src,
        aspectRatio: e.aspectRatio ?? "16by9",
        className: t
      }
    ) });
  }, k = (e = {}) => e.type === m.MEDIA_TYPE_VIDEO ? _(e) : e.src && S(e), P = r("media-dialog", d && d), w = r("padding-0"), B = r("media-content", "content-center"), O = l[n].title, V = l[n].subtitle || null;
  return /* @__PURE__ */ s(
    R,
    {
      ...E,
      show: h,
      title: O,
      subtitle: V,
      body: /* @__PURE__ */ s("div", { className: B, children: k(l[n]) }),
      footer: l?.length > 1 && /* @__PURE__ */ i(z, { children: [
        /* @__PURE__ */ i("button", { type: "button", className: "btn btn-primary btn-link pull-left", onClick: T, children: [
          /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-chevron-left" }),
          v
        ] }),
        /* @__PURE__ */ s("div", { children: `${n + 1} / ${o.media.length}` }),
        /* @__PURE__ */ i("button", { type: "button", className: "btn btn-primary btn-link btn-icon-right", onClick: A, children: [
          /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-chevron-right" }),
          I
        ] })
      ] }),
      onClose: N,
      className: P,
      bodyClassName: w,
      disableEsc: b,
      useOverflow: f,
      bsSize: x
    }
  );
};
m.MEDIA_TYPE_IMAGE = "image";
m.MEDIA_TYPE_VIDEO = "video";
export {
  m as default
};
//# sourceMappingURL=MediaDialog.js.map
