"use client";
import { j as i } from "../../../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { useState as w, useEffect as a, useCallback as x } from "react";
import { useMediaQuery as V } from "@mantine/hooks";
import p from "../../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import { tabletLandscapeBreakpointPx as T } from "../../../../styles/utilities/variables.mjs";
import { useCarousel as W } from "../../index.mjs";
import y from "../../../ArrowCircularButton/index.mjs";
import f from "./Controller.module.scss.mjs";
import C from "./components/Item/index.mjs";
import { scrollHorizontalIntoViewWithOffset as z } from "./helpers.mjs";
const X = ({
  itemsData: r,
  className: j,
  numItemsToShow: h = 5,
  showItemLoadBar: k = !0,
  classNames: e,
  ...v
}) => {
  const { activeIndex: l, setActiveIndex: g, isLoading: _ } = W(), [o, u] = w(0), [c, I] = w(h), d = V(
    `(max-width: ${T}px)`,
    !1,
    {
      getInitialValueInEffect: !0
    }
  );
  a(() => {
    I(d ? r.length : h);
  }, [d]), a(() => {
    d && z(
      "carousel-controller-root-container",
      `carousel-controller-item-id-${l}`,
      16
    );
  }, [d, l]);
  const n = Math.floor((r.length - 1) / c), E = x(() => {
    let t = o + 1;
    t > n && (t = 0), u(t);
  }, [n, u, o]), S = x(() => {
    let t = o - 1;
    t < 0 && (t = n), u(t);
  }, [n, u, o]), b = x(
    (t) => {
      g(t);
    },
    [g]
  );
  a(() => {
    const t = Math.floor(l / c);
    u(t);
  }, [l]);
  const L = Math.max(o * c, 0), M = (o + 1) * c, m = n === 0 || _, s = [];
  for (let t = L; t < M; ++t)
    if (t < r.length) {
      const A = r[t].image;
      s.push(
        /* @__PURE__ */ i.jsx(
          C,
          {
            imageElement: A,
            isActive: t === l,
            onClick: () => b(t),
            "data-testid": `carousel-controller-item-${t}`,
            showLoadBar: k,
            itemIndex: t,
            className: e == null ? void 0 : e.item,
            isVideoSlide: r[t].isVideoSlide,
            id: `carousel-controller-item-id-${t}`
          },
          `hyperplay_carousel_controller_${t}`
        )
      );
    } else {
      if (n === 0)
        continue;
      s.push(
        /* @__PURE__ */ i.jsx(
          C,
          {
            imageElement: null,
            isActive: !1,
            onClick: () => console.warn("empty item clicked"),
            itemIndex: t,
            isEmptyItem: !0
          },
          `hyperplay_carousel_controller_empty_${t}`
        )
      );
    }
  let B = /* @__PURE__ */ i.jsx(
    y,
    {
      onClick: S,
      className: e == null ? void 0 : e.leftButton,
      isLeftButton: !0,
      classNames: { root: f.itemsPageButton }
    }
  );
  m && (B = null);
  let P = /* @__PURE__ */ i.jsx(
    y,
    {
      onClick: E,
      className: p(e == null ? void 0 : e.rightButton),
      isLeftButton: !1,
      disabled: m,
      classNames: { root: f.itemsPageButton }
    }
  );
  return m && (P = null), /* @__PURE__ */ i.jsx(
    "div",
    {
      id: "carousel-controller-root-container",
      className: p(
        f.controllerDetached,
        j,
        e == null ? void 0 : e.rootContainer
      ),
      ...v,
      children: /* @__PURE__ */ i.jsxs("div", { className: p(f.root, e == null ? void 0 : e.root), children: [
        B,
        s,
        P
      ] })
    }
  );
};
export {
  X as default
};
//# sourceMappingURL=index.mjs.map
