"use client";
import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { useCallback as g } from "react";
import { Navigation as f } from "swiper/modules";
import { Swiper as u, SwiperSlide as v } from "swiper/react";
import { useSwiperWithAutoPlay as w } from "../../utils/useSwiper/useSwiper.es.js";
import { cn as N } from "../../utils/cn/cn.es.js";
/* empty css                                                                       */
/* empty css                                                                                   */
/* empty css                                                                                   */
import { GalleryPagination as y } from "../GalleryPagination/GalleryPagination.es.js";
import i from "../../components/AdvancedGallery/advancedGallery.module.css";
import { Label as P } from "../Label/Label.es.js";
import { VideoSlide as k } from "./components/VideoSlide/VideoSlide.es.js";
import { ImageGalleryPagination as C } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
const I = [f], U = ({ items: a, label: n, className: d }) => {
  const { activeIndex: l, handleSlideTo: t, handleSlideChange: p, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: o } = w(5e3), c = g(
    (r) => {
      o(), t(r);
    },
    [o, t]
  );
  return /* @__PURE__ */ s("div", { className: N(i.root, d), children: [
    n && /* @__PURE__ */ e("div", { className: i.labelWrap, children: /* @__PURE__ */ e(P, { color: "black", size: "sm", children: n }) }),
    /* @__PURE__ */ e(
      u,
      {
        onSwiper: h,
        onResize: S,
        onSlideChange: p,
        onTouchStart: o,
        onTouchEnd: o,
        modules: I,
        spaceBetween: 0,
        slidesPerView: 1,
        className: i.swiper,
        children: a.map((r, m) => /* @__PURE__ */ s(v, { children: [
          r.mediaType === "image" && /* @__PURE__ */ e("div", { className: i.imageWrapper, children: /* @__PURE__ */ e(
            "img",
            {
              src: r.url,
              alt: "product image",
              className: i.image,
              onClick: o
            }
          ) }),
          r.mediaType === "video" && /* @__PURE__ */ e(k, { item: r, isActive: l === m, onClick: o })
        ] }, m))
      }
    ),
    /* @__PURE__ */ e("div", { className: i.hideOnMobile, children: /* @__PURE__ */ e(C, { items: a, activeIndex: l, onSelect: c }) }),
    /* @__PURE__ */ e("div", { className: i.hideOnDesktop, children: /* @__PURE__ */ e(y, { count: a.length, activeIndex: l, onSelect: c }) })
  ] });
};
export {
  U as AdvancedGallery
};
