import { jsx as o, jsxs as p } from "react/jsx-runtime";
import { mb3 as c, w100 as h, dFlexColumn as g } from "./index-general.module.js";
import { classNames as b } from "./index-classNames.js";
import { updateImageUrlWithBaseRequest as v } from "./index-update-image-url-with-base-request.js";
import { MediaItemType as x } from "./index-MediaItem.js";
import { Text as y, TextTypes as C, FontWeights as I } from "./index-Text.js";
import { useState as M, useEffect as N } from "react";
import { ComponentContainer as U } from "./index-ComponentContainer.js";
import { Modal as T } from "./index-Modal.js";
import { ModalBody as B } from "./index-ModalBody.js";
import { ModalHeader as R } from "./index-ModalHeader.js";
import { SlideCarousel as j } from "./index-SlideCarousel.js";
import a from "./index-PhotoCarouselModal.module.scss.js";
const $ = (l) => {
  const {
    gallery: r,
    close: f,
    defaultMediaItem: t
  } = l, [s, u] = M(0);
  return N(() => {
    t && u(r.map((e) => e.uuid).indexOf(t.uuid));
  }, [t]), o(U, {
    className: a.container,
    children: p(T, {
      ...l,
      className: "confirm-modal",
      children: [o(R, {
        className: c,
        closeFn: f,
        hideCloseButtonOnMobile: !1,
        children: o(y, {
          fontWeight: I.bold,
          type: C.heading4,
          className: b(h, c),
          children: "Media gallery"
        })
      }), o(B, {
        padding: 0,
        children: o("div", {
          className: g,
          children: o(j, {
            activeIndex: s,
            initialIndex: s,
            hasBullets: r.length > 1,
            hasArrows: r.length != 1,
            children: r && r.map((e) => {
              var m, n;
              if (e.file && ((m = e.fileType) != null && m.includes("video")) || e.type === x.video) {
                let i = "";
                return e.file ? i = URL.createObjectURL(e.file) : i = e.publicUrl ?? "", o("video", {
                  src: i,
                  width: "100%",
                  height: "100%",
                  controls: !0,
                  className: a.carouselVideo
                });
              }
              const d = e.publicThumbnailUrl ?? e.publicUrl ?? ((n = e.mediaItemContent) == null ? void 0 : n.base64EncodedContent);
              return o("div", {
                draggable: "false",
                className: a.carouselPhoto,
                style: {
                  backgroundImage: `url(${v(d)})`,
                  backgroundColor: "var(--fn-bg-var)"
                }
              }, d);
            })
          })
        })
      })]
    })
  });
};
export {
  $ as PhotoCarouselModal
};
