"use client";
import { j as l } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { createContext as X, useState as d, useRef as Y, useCallback as c, useContext as Z } from "react";
import { Carousel as V } from "@mantine/carousel";
import { useMediaQuery as _ } from "@mantine/hooks";
import j from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import $ from "embla-carousel-autoplay";
import { ReactComponent as ee } from "../../assets/images/ChevronLeft.svg.mjs";
import { ReactComponent as te } from "../../assets/images/ChevronRight.svg.mjs";
import { tabletLandscapeBreakpointPx as oe } from "../../styles/utilities/variables.mjs";
import ie from "./components/Controller/index.mjs";
import { SlideVideo as ne } from "./components/SlideVideo/index.mjs";
import n from "./index.module.scss.mjs";
const b = X(
  void 0
), ve = () => {
  const r = Z(b);
  if (!r)
    throw new Error("useCarousel must be used within a CarouselProvider");
  return r;
}, p = ({
  classNames: r,
  children: P,
  className: E,
  childrenNotInCarousel: R,
  autoplayOptions: U,
  isLoading: a,
  withControls: A = !0,
  ...k
}) => {
  var O;
  const [f, v] = d(0), [s, F] = d(
    void 0
  ), [
    u,
    L
  ] = d({}), [
    D,
    B
  ] = d({}), [m, Q] = d([]), q = (e, t) => {
    B((i) => ({
      ...i,
      [e]: t
    }));
  }, x = (e, t) => {
    L((i) => ({
      ...i,
      [e]: {
        timeLeftInMs: t,
        lastUpdatedMsSinceEpoch: Date.now()
      }
    }));
  }, o = Y(
    $({ stopOnInteraction: !1, ...U })
  ), h = _(
    `(max-width: ${oe}px)`,
    !1,
    {
      getInitialValueInEffect: !0
    }
  ), C = h || a, y = c(
    (e) => {
      var t, i;
      v(e), s == null || s.scrollTo(e), h || ((t = o.current) == null || t.reset(), (i = o.current) == null || i.play());
    },
    [v, o.current, s]
  ), T = (O = o.current.options.delay) == null ? void 0 : O.valueOf();
  let w;
  typeof T == "number" && (w = T);
  const M = c(
    (e) => {
      s == null || s.scrollNext(e);
    },
    [s]
  ), [z, G] = d({}), S = (e, t) => {
    G((i) => ({
      ...i,
      [e]: t
    }));
  }, H = c(
    (e) => {
      const t = new Set(m);
      t.add(e), Q([...t.values()]), S(e, !0), o.current.stop();
    },
    [o, m]
  ), J = c(
    (e) => {
      if (S(e, !1), !Object.hasOwn(
        u,
        e
      ))
        return;
      const {
        timeLeftInMs: t,
        lastUpdatedMsSinceEpoch: i
      } = u[e], W = t - (Date.now() - i);
      x(e, W);
    },
    [u]
  ), K = c(
    (e) => {
      var t;
      S(e, !1), (t = o.current) == null || t.play(), C || M();
    },
    [o.current, M]
  ), N = {
    activeIndex: f,
    setActiveIndex: (e) => {
      y(e);
    },
    isRotating: () => o.current.isPlaying(),
    play: () => {
      var e;
      return (e = o.current) == null ? void 0 : e.play();
    },
    stop: () => {
      o.current.stop();
    },
    totalSlideTime: w,
    getTimeUntilSlideFinished: o.current.timeUntilNext,
    slideTimeOverrideIndexToTimeMsMap: D,
    setSlideTimeOverride: q,
    timeUntilSlideFinishedOverrideIndexToTimeMsMap: u,
    setTimeUntilSlideFinishedOverride: x,
    onVideoPlay: H,
    onVideoPaused: J,
    onVideoEnded: K,
    isVideoSlidePlaying: z,
    isVideoSlide: m.some((e) => e === f),
    isLoading: a,
    emblaApi: s
  };
  let I = null;
  a && (I = /* @__PURE__ */ l.jsx(
    p.Slide,
    {
      classNames: { slide: n.loading },
      children: /* @__PURE__ */ l.jsx("img", { width: 1920, height: 1080 })
    },
    "carousel-loader-skeleton"
  ));
  let g = P;
  return a && (g = null), /* @__PURE__ */ l.jsx(b.Provider, { value: N, children: /* @__PURE__ */ l.jsxs(
    "div",
    {
      className: j(n.root, r == null ? void 0 : r.hpCarouselRoot, E),
      "data-testid": "carousel-root",
      children: [
        /* @__PURE__ */ l.jsxs(
          V,
          {
            getEmblaApi: F,
            classNames: {
              root: n.mantineCarouselRoot,
              slide: j(n.slide, r == null ? void 0 : r.slide),
              indicators: n.indicators,
              indicator: n.indicator,
              controls: n.controls,
              control: n.control,
              viewport: n.viewport,
              container: n.container
            },
            loop: !0,
            withControls: !h && A,
            previousControlProps: { component: "div" },
            nextControlProps: { component: "div" },
            withIndicators: !0,
            plugins: C ? [] : [o.current],
            onSlideChange: (e) => y(e),
            previousControlIcon: /* @__PURE__ */ l.jsx("button", { type: "button", children: /* @__PURE__ */ l.jsx(
              ee,
              {
                "data-testid": "carousel-prev-control-icon",
                width: "9px",
                height: "15px"
              }
            ) }),
            nextControlIcon: /* @__PURE__ */ l.jsx("button", { type: "button", children: /* @__PURE__ */ l.jsx(
              te,
              {
                "data-testid": "carousel-next-control-icon",
                width: "9px",
                height: "15px"
              }
            ) }),
            ...k,
            children: [
              g,
              I
            ]
          }
        ),
        R
      ]
    }
  ) });
};
p.Slide = V.Slide;
p.Controller = ie;
p.SlideVideo = ne;
export {
  p as default,
  ve as useCarousel
};
//# sourceMappingURL=index.mjs.map
