import u from "../../../../classnames/index.mjs";
import a, { forwardRef as _, useState as y, useRef as R, useImperativeHandle as I, useCallback as S } from "react";
import { renderToContainer as g } from "../../utils/render-to-container.mjs";
import { mergeProps as p } from "../../utils/with-default-props.mjs";
import "../mask/mask.css.mjs";
import { Mask as C } from "../mask/mask.mjs";
import "../safe-area/safe-area.css.mjs";
import { SafeArea as b } from "../safe-area/safe-area.mjs";
import { Slide as h } from "./slide.mjs";
import { Slides as k } from "./slides.mjs";
const m = "adm-image-viewer", x = {
  maxZoom: 3,
  getContainer: null,
  visible: !1
}, A = (d) => {
  var s, t, i;
  const o = p(x, d), e = a.createElement(C, {
    visible: o.visible,
    disableBodyScroll: !1,
    opacity: "thick",
    afterClose: o.afterClose,
    destroyOnClose: !0,
    className: (s = o == null ? void 0 : o.classNames) === null || s === void 0 ? void 0 : s.mask
  }, a.createElement("div", {
    className: u(`${m}-content`, (t = o == null ? void 0 : o.classNames) === null || t === void 0 ? void 0 : t.body)
  }, (o.image || typeof o.imageRender == "function") && a.createElement(h, {
    image: o.image,
    onTap: o.onClose,
    maxZoom: o.maxZoom,
    imageRender: o.imageRender
  })), o.image && a.createElement("div", {
    className: `${m}-footer`
  }, (i = o.renderFooter) === null || i === void 0 ? void 0 : i.call(o, o.image), a.createElement(b, {
    position: "bottom"
  })));
  return g(o.getContainer, e);
}, T = Object.assign(Object.assign({}, x), {
  defaultIndex: 0
}), D = _((d, s) => {
  var t, i, o;
  const e = p(T, d), [n, v] = y(e.defaultIndex), f = R(null);
  I(s, () => ({
    swipeTo: (l, r) => {
      var c;
      v(l), (c = f.current) === null || c === void 0 || c.swipeTo(l, r);
    }
  }));
  const N = S((l) => {
    var r;
    l !== n && (v(l), (r = e.onIndexChange) === null || r === void 0 || r.call(e, l));
  }, [e.onIndexChange, n]), E = a.createElement(C, {
    visible: e.visible,
    disableBodyScroll: !1,
    opacity: "thick",
    afterClose: e.afterClose,
    destroyOnClose: !0,
    className: (t = e == null ? void 0 : e.classNames) === null || t === void 0 ? void 0 : t.mask
  }, a.createElement("div", {
    className: u(`${m}-content`, (i = e == null ? void 0 : e.classNames) === null || i === void 0 ? void 0 : i.body)
  }, e.images && a.createElement(k, {
    ref: f,
    defaultIndex: n,
    onIndexChange: N,
    images: e.images,
    onTap: e.onClose,
    maxZoom: e.maxZoom,
    imageRender: e.imageRender
  })), e.images && a.createElement("div", {
    className: `${m}-footer`
  }, (o = e.renderFooter) === null || o === void 0 ? void 0 : o.call(e, e.images[n], n), a.createElement(b, {
    position: "bottom"
  })));
  return g(e.getContainer, E);
});
export {
  A as ImageViewer,
  D as MultiImageViewer
};
