import { ArrowIcon as l, ArrowIconStyles as o } from "./accelbyte-widgets125.mjs";
import { getYoutubeHqThumbnailUrl as p } from "./accelbyte-widgets390.mjs";
import { UniversalMedia as u, UniversalMediaType as m } from "./accelbyte-widgets149.mjs";
import { UniversalMediaHelper as g } from "./accelbyte-widgets391.mjs";
import d from "./accelbyte-widgets261.mjs";
import c from "classnames";
import "./accelbyte-widgets392.mjs";
import e from "react";
import { Trans as f } from "react-i18next";
import v from "react-slick";
import "./accelbyte-widgets393.mjs";
import "./accelbyte-widgets394.mjs";
import "./accelbyte-widgets395.mjs";
import { YoutubeVideoMediumCodec as E } from "./accelbyte-widgets396.mjs";
import { ImageMediumCodec as M } from "./accelbyte-widgets397.mjs";
const h = class extends e.Component {
  constructor(i) {
    super(i), this.sliderRef = e.createRef(), this.setIsSliderEnabled = () => {
      const r = 288 * this.props.itemMedias.length;
      this.setState({ isSliderEnabled: r > window.innerWidth - 260 });
    }, this.onClickPrev = () => {
      const t = this.sliderRef.current;
      t && t.slickPrev();
    }, this.onClickNext = () => {
      const t = this.sliderRef.current;
      t && t.slickNext();
    }, this.onMouseDown = (t) => {
      this.setState({ lastMousePos: t.clientX });
    }, this.isUniversalMedia = () => {
      const { itemMedias: t } = this.props;
      let s = !0;
      return t.length && (s = u.safeParse(t[0]).success), s;
    }, this.handlerOpenLightbox = (t) => (s) => {
      s.clientX === this.state.lastMousePos && this.props.openLightbox && this.props.openLightbox(t);
    }, this.renderItemImage = (t, s) => {
      let r = d;
      const a = E.safeParse(t), n = M.safeParse(t);
      return a.success ? r = p(a.data.value.youtubeId) : n.success && (r = n.data.value.imageUrl), /* @__PURE__ */ e.createElement("div", { key: s, className: "imageContainer", onMouseDown: this.onMouseDown, onMouseUp: this.handlerOpenLightbox(s) }, /* @__PURE__ */ e.createElement("img", { src: r, loading: "lazy" }), /* @__PURE__ */ e.createElement("div", { className: "overlayImage" }));
    }, this.renderUniversalMediaImage = (t, s) => {
      const r = g.getMediaScreenshot(t);
      return /* @__PURE__ */ e.createElement("div", { key: s, className: "imageContainer", onMouseDown: this.onMouseDown, onMouseUp: this.handlerOpenLightbox(s) }, t.type === m.URL_VIDEO && /* @__PURE__ */ e.createElement("video", { src: t.content, width: 288 }), t.type !== m.URL_VIDEO && /* @__PURE__ */ e.createElement("img", { src: r || d, loading: "lazy" }), /* @__PURE__ */ e.createElement("div", { className: "overlayImage" }));
    }, this.state = {
      lastMousePos: null,
      isSliderEnabled: !1
    };
  }
  componentDidMount() {
    this.setIsSliderEnabled(), window.addEventListener("resize", this.setIsSliderEnabled);
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.setIsSliderEnabled);
  }
  componentDidUpdate(i) {
    this.props.itemMedias !== i.itemMedias && this.setIsSliderEnabled();
  }
  render() {
    const { itemMedias: i } = this.props, { isSliderEnabled: t } = this.state;
    if (!i.length)
      return null;
    const s = this.isUniversalMedia();
    return /* @__PURE__ */ e.createElement("div", { className: "appDetailGalleryContainer" }, /* @__PURE__ */ e.createElement("div", { className: "galleryDesktop" }, t ? /* @__PURE__ */ e.createElement("div", { className: "galleryWithSlider" }, /* @__PURE__ */ e.createElement(v, { ...h.sliderSetting, ref: this.sliderRef, className: "sliderContainer" }, s && i.map(this.renderUniversalMediaImage), !s && i.map(this.renderItemImage)), /* @__PURE__ */ e.createElement("button", { className: "btnPrev", onClick: this.onClickPrev }, /* @__PURE__ */ e.createElement(l, { className: c(o.left, "p-3") })), /* @__PURE__ */ e.createElement("button", { className: "btnNext", onClick: this.onClickNext }, /* @__PURE__ */ e.createElement(l, { className: c(o.right, "p-3") }))) : /* @__PURE__ */ e.createElement(e.Fragment, null, s && i.map(this.renderUniversalMediaImage), !s && i.map(this.renderItemImage))), /* @__PURE__ */ e.createElement("div", { className: "galleryMobile" }, i.length > 4 && /* @__PURE__ */ e.createElement(e.Fragment, null, s && i.slice(0, 4).map(this.renderUniversalMediaImage), !s && i.slice(0, 4).map(this.renderItemImage), /* @__PURE__ */ e.createElement("div", { className: "btnSeeMore", onClick: () => this.props.openLightbox(0) }, /* @__PURE__ */ e.createElement(f, { i18nKey: "AppDetailGallery.seeMoreScreenshot" }, "See more screenshots"))), s && i.length <= 4 && i.map(this.renderUniversalMediaImage), !s && i.length <= 4 && i.map(this.renderItemImage)));
  }
};
let I = h;
I.sliderSetting = {
  dots: !1,
  infinite: !0,
  speed: 500,
  variableWidth: !0,
  swipe: !0,
  arrows: !1,
  touchThreshold: 100,
  swipeToSlide: !0,
  initialSlide: 0,
  slidesToShow: 4
};
export {
  I as AppDetailGallery
};
