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