import { getYoutubeEmbedUrl as v, getYoutubeHqThumbnailUrl as b } from "./accelbyte-widgets390.mjs";
import { UniversalMedia as m, UniversalMediaType as c } from "./accelbyte-widgets149.mjs";
import { UniversalMediaHelper as u } from "./accelbyte-widgets391.mjs";
import { UrlUtils as N } from "./accelbyte-widgets90.mjs";
import h from "./accelbyte-widgets261.mjs";
import P from "classnames";
import { MediumCodecArray as k } from "./accelbyte-widgets392.mjs";
import t, { Component as S } from "react";
import V from "react-dom";
import { Trans as R } from "react-i18next";
import d from "react-player";
import x from "react-slick";
import "./accelbyte-widgets393.mjs";
import "./accelbyte-widgets394.mjs";
import { ArrowIcon as p, ArrowIconStyles as g } from "./accelbyte-widgets125.mjs";
import { CloseIcon as U } from "./accelbyte-widgets426.mjs";
import "./accelbyte-widgets427.mjs";
import { ImageMediumCodec as y } from "./accelbyte-widgets397.mjs";
import { YoutubeVideoMediumCodec as f } from "./accelbyte-widgets396.mjs";
function A() {
  const o = "lightboxWrapper";
  let e = document.getElementById(o);
  return e || (e = document.createElement("div"), e.id = o, document.body.appendChild(e)), e;
}
const C = class extends S {
  constructor(o) {
    super(o), this.sliderRef = t.createRef(), this.onClickImageGallery = (e) => {
      const s = this.sliderRef.current;
      s && (s.slickGoTo(e), this.pauseVideo());
    }, this.onClickPrev = () => {
      const e = this.sliderRef.current;
      e && (e.slickPrev(), this.pauseVideo());
    }, this.onClickNext = () => {
      const e = this.sliderRef.current;
      e && (e.slickNext(), this.pauseVideo());
    }, this.pauseVideo = () => this.setState({ playingVideo: null }), this.renderSliderContentsItemMedias = () => {
      const { itemMedias: e } = this.props, { playingVideo: s } = this.state;
      if (!Array.isArray(e) || !e.length)
        return null;
      if (m.safeParse(e[0]).success)
        return e.map((a) => {
          switch (a.type) {
            case c.YOUTUBE_VIDEO:
            case c.URL_VIDEO:
              return /* @__PURE__ */ t.createElement(
                d,
                {
                  key: a.content,
                  className: "lightboxSlideItems",
                  controls: !0,
                  url: a.content,
                  width: "100%",
                  playing: s === a.content,
                  onPlay: () => this.setState({ playingVideo: a.content }),
                  onPause: this.pauseVideo
                }
              );
            default:
              return /* @__PURE__ */ t.createElement("img", { key: a.content, alt: a.content, src: a.content, className: "lightboxSlideItems", loading: "lazy" });
          }
        });
      const r = k.safeParse(e);
      return r.success ? r.data.map((a, n) => {
        const i = y.safeParse(a);
        if (i.success)
          return /* @__PURE__ */ t.createElement(
            "div",
            {
              key: i.data.value.imageUrl,
              className: "mediumCodecContainer",
              onClick: () => this.onClickImageGallery(n)
            },
            /* @__PURE__ */ t.createElement("img", { src: i.data.value.imageUrl, className: "mediumCodecItem", loading: "lazy" }),
            n !== this.state.currentPosition ? /* @__PURE__ */ t.createElement("div", { className: "overlayImage" }) : ""
          );
        const l = f.safeParse(a);
        return l.success ? /* @__PURE__ */ t.createElement(
          d,
          {
            key: l.data.value.youtubeId,
            className: "lightboxSlideItems",
            controls: !0,
            url: v(l.data.value.youtubeId),
            width: "100%",
            playing: s === l.data.value.youtubeId,
            onPlay: () => this.setState({ playingVideo: l.data.value.youtubeId }),
            onPause: this.pauseVideo
          }
        ) : null;
      }) : null;
    }, this.renderSliderContentsFromImageUrls = () => {
      const { imageUrls: e } = this.props, { playingVideo: s } = this.state;
      return Array.isArray(e) && e.map((r) => N.isImageURL(r) ? /* @__PURE__ */ t.createElement("img", { key: r, src: r, className: "lightboxSlideItems", alt: r, loading: "lazy" }) : /* @__PURE__ */ t.createElement(
        d,
        {
          key: r,
          className: "lightboxSlideItems",
          controls: !0,
          url: r,
          width: "100%",
          playing: s === r,
          onPlay: () => this.setState({ playingVideo: r }),
          onPause: this.pauseVideo
        }
      ));
    }, this.renderGalleryFromItemMedias = () => {
      const { itemMedias: e } = this.props;
      return !Array.isArray(e) || !e.length ? null : m.safeParse(e[0]).success ? m.safeParse(e[0]).success && e.map((s, r) => {
        const a = u.getMediaScreenshot(s);
        return /* @__PURE__ */ t.createElement("div", { key: r, className: "mediaContainer", onClick: () => this.onClickImageGallery(r) }, s.type === c.URL_VIDEO && /* @__PURE__ */ t.createElement("video", { src: s.content, className: "mediaItem" }), s.type !== c.URL_VIDEO && /* @__PURE__ */ t.createElement("img", { src: a || h, className: "mediaItem", loading: "lazy" }), r !== this.state.currentPosition ? /* @__PURE__ */ t.createElement("div", { className: "overlayImage" }) : "");
      }) : e.map((s, r) => {
        let a = h;
        const n = f.safeParse(s), i = y.safeParse(s);
        return n.success ? a = b(n.data.value.youtubeId) : i.success && (a = i.data.value.imageUrl), /* @__PURE__ */ t.createElement("div", { key: r, className: "mediaContainer", onClick: () => this.onClickImageGallery(r) }, /* @__PURE__ */ t.createElement("img", { src: a, className: "mediaItem", loading: "lazy" }), r !== this.state.currentPosition ? /* @__PURE__ */ t.createElement("div", { className: "overlayImage" }) : "");
      });
    }, this.renderGalleryFromImageUrls = () => {
      const { imageUrls: e } = this.props;
      return Array.isArray(e) && e.map((s, r) => /* @__PURE__ */ t.createElement("div", { key: s, className: "mediaContainer", onClick: () => this.onClickImageGallery(r) }, /* @__PURE__ */ t.createElement("img", { src: u.getYoutubeScreenshot(s) || s, className: "mediaItem", loading: "lazy" }), r !== this.state.currentPosition ? /* @__PURE__ */ t.createElement("div", { className: "overlayImage" }) : ""));
    }, this.modalRoot = A(), this.modalContainer = document.createElement("div"), this.state = {
      currentPosition: o.selectedPosition,
      playingVideo: null
    };
  }
  componentDidMount() {
    if (!this.modalRoot)
      return;
    this.modalRoot.appendChild(this.modalContainer);
    const { currentPosition: o } = this.state, e = this.sliderRef.current;
    e && e.slickGoTo(o, !1);
  }
  componentWillUnmount() {
    this.modalRoot && this.modalRoot.removeChild(this.modalContainer);
  }
  renderLightbox() {
    const { onClose: o, className: e, itemMedias: s, imageUrls: r } = this.props, { currentPosition: a } = this.state, n = a + 1, i = Array.isArray(s) ? s.length : Array.isArray(r) ? r.length : 0;
    return /* @__PURE__ */ t.createElement("section", { className: P("lightbox", e) }, /* @__PURE__ */ t.createElement(
      "button",
      {
        className: "closeButton",
        onClick: () => {
          o && o();
        }
      },
      /* @__PURE__ */ t.createElement(U, null)
    ), /* @__PURE__ */ t.createElement("div", { className: "lightboxContent" }, /* @__PURE__ */ t.createElement("div", { className: "lightboxSliderContainer" }, /* @__PURE__ */ t.createElement("button", { className: "arrowButtonContainer", onClick: this.onClickPrev }, /* @__PURE__ */ t.createElement("div", { className: "arrowLeftButton" }, /* @__PURE__ */ t.createElement(p, { className: g.left }))), /* @__PURE__ */ t.createElement("div", { className: "lightboxSlider" }, /* @__PURE__ */ t.createElement(
      x,
      {
        ...C.sliderSetting,
        ref: this.sliderRef,
        initialSlide: a,
        beforeChange: (l, E) => this.setState({ currentPosition: E })
      },
      this.renderSliderContentsItemMedias() || this.renderSliderContentsFromImageUrls()
    )), /* @__PURE__ */ t.createElement("button", { className: "arrowButtonContainer", onClick: this.onClickNext }, /* @__PURE__ */ t.createElement("div", { className: "arrowRightButton" }, /* @__PURE__ */ t.createElement(p, { className: g.right })))), /* @__PURE__ */ t.createElement("p", { className: "lightboxCounter" }, /* @__PURE__ */ t.createElement(R, { i18nKey: "Lightbox.counter" }, { realCurrenPosition: n }, " of ", { totalImage: i })), /* @__PURE__ */ t.createElement("div", { className: "lightboxGallery" }, this.renderGalleryFromItemMedias() || this.renderGalleryFromImageUrls())));
  }
  renderLightboxOverlay() {
    return /* @__PURE__ */ t.createElement("div", { className: "lightboxOverlay" }, this.renderLightbox());
  }
  render() {
    const { isOpen: o } = this.props;
    return o ? V.createPortal(this.renderLightboxOverlay(), this.modalContainer) : null;
  }
};
let I = C;
I.defaultProps = {
  className: "",
  isOpen: !1,
  onClose: () => null,
  currentPosition: 0
};
I.sliderSetting = {
  dots: !1,
  infinite: !0,
  speed: 300,
  slideToShow: 1,
  slideToScroll: 1,
  arrows: !1,
  adaptiveHeight: !0
};
export {
  I as Lightbox,
  A as getDialogContainer
};
