"use client";
import { jsxs as d, Fragment as v, jsx as e } from "react/jsx-runtime";
import { useCallback as y, useMemo as I } from "react";
import { Navigation as P } from "swiper/modules";
import { Swiper as b, SwiperSlide as C } from "swiper/react";
import { useSwiperWithAutoPlay as k } from "../../utils/useSwiper/useSwiper.es.js";
import { cn as x } from "../../utils/cn/cn.es.js";
/* empty css                                                                       */
/* empty css                                                                                   */
/* empty css                                                                                   */
import r from "../../components/ImageGallery/imageGallery.module.css";
import { ImageGalleryPagination as h } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
import { GalleryPagination as p } from "../GalleryPagination/GalleryPagination.es.js";
import { Label as W } from "../Label/Label.es.js";
const z = [P], V = ({ images: i, label: m, className: S, type: l = "primary", paginationType: t }) => {
  const { activeIndex: n, handleSlideTo: s, handleSlideChange: u, onSwiperInit: f, handleSwiperResize: g, handleUserInteraction: o } = k(3e3), a = y(
    (c) => {
      o(), s(c);
    },
    [o, s]
  ), w = I(() => t ? t === "thumbnail" ? /* @__PURE__ */ e(h, { images: i, activeIndex: n, onSelect: a }) : /* @__PURE__ */ e(p, { count: i.length, activeIndex: n, onSelect: a }) : /* @__PURE__ */ d(v, { children: [
    /* @__PURE__ */ e("div", { className: r.hideOnMobile, children: /* @__PURE__ */ e(
      h,
      {
        images: i,
        activeIndex: n,
        onSelect: a
      }
    ) }),
    /* @__PURE__ */ e("div", { className: r.hideOnDesktop, children: /* @__PURE__ */ e(
      p,
      {
        count: i.length,
        activeIndex: n,
        onSelect: a
      }
    ) })
  ] }), [i.length, n, a, t]);
  return /* @__PURE__ */ d(
    "div",
    {
      className: x(r.root, S, {
        [r.primary]: l === "primary",
        [r.secondary]: l === "secondary"
      }),
      children: [
        m && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(W, { color: "black", size: "sm", children: m }) }),
        /* @__PURE__ */ e(
          b,
          {
            onSwiper: f,
            onResize: g,
            onSlideChange: u,
            onTouchStart: o,
            onTouchEnd: o,
            modules: z,
            spaceBetween: 0,
            slidesPerView: 1,
            className: r.swiper,
            children: i.map((c, N) => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("div", { className: r.imageContainer, children: /* @__PURE__ */ e("div", { className: r.imageWrapper, children: /* @__PURE__ */ e(
              "img",
              {
                src: c,
                alt: "product image",
                width: l === "primary" ? 600 : 492,
                height: l === "primary" ? 600 : 389,
                className: r.image,
                onClick: o
              }
            ) }) }) }, N))
          }
        ),
        w
      ]
    }
  );
};
export {
  V as ImageGallery
};
