import { jsxs as q, jsx as o } from "react/jsx-runtime";
import { breakpoints as E } from "./index-breakpoints.js";
import { useWindowResize as Z } from "./index-use-window.resize.js";
import { classNames as m } from "./index-classNames.js";
import { ComponentContainer as ee } from "./index-ComponentContainer.js";
import { Icon as O, IconSize as P } from "./index-Icon.js";
import { IconNames as T } from "./index-IconNames.js";
import { Render as f } from "./index-Render.js";
import { useRef as te, useState as C, useEffect as U } from "react";
import { ElementsBeforeAfter as V } from "./index-ElementsBeforeAfter.js";
import l from "./index-FadedCarousel.module.scss.js";
const de = (Y) => {
  const {
    items: c,
    maxVisibleItems: $,
    scrollOffset: B = 300,
    mode: i = "start",
    fade: s,
    arrows: t,
    className: N
  } = Y, a = te(null), h = Z(), [S, G] = C(!1), [b, H] = C(!0), R = 3, J = $ ?? (c.length > R ? R : 1), d = h <= E.tablet ? 1 : J, n = d === 1 ? 80 : parseFloat((Math.round(100 / d * 100) / 100).toFixed(2)), W = Math.floor(c.length / 2) - Math.floor(d / 2), M = Math.floor(c.length / 2) + Math.ceil(d / 2), K = c.slice(W, M), u = c.slice(0, W), g = c.slice(M), [p, x] = C(u.length * -n), [v, y] = C(g.length * -n), F = h <= E.tablet ? (g.length - 3) * n : (g.length - 1) * n, k = h <= E.tablet ? (u.length - 3) * n : (u.length - 1) * n, w = p >= k, z = v >= F, Q = () => {
    var e;
    i === "centerWithElementsBeforeAfter" ? p < k && (x((r) => r + n), y((r) => r - n)) : (e = a.current) == null || e.scrollBy({
      left: -B,
      behavior: "smooth"
    });
  }, X = () => {
    var e;
    i === "centerWithElementsBeforeAfter" ? v < F && (y((r) => r + n), x((r) => r - n)) : (e = a.current) == null || e.scrollBy({
      left: B,
      behavior: "smooth"
    });
  }, A = () => {
    const e = a.current;
    if (!e)
      return;
    G(e.scrollLeft > 0);
    const r = e.scrollLeft + e.clientWidth >= e.scrollWidth;
    H(!r);
  };
  U(() => {
    if (i === "centerWithElementsBeforeAfter")
      return;
    const e = a.current;
    if (e)
      return A(), e.addEventListener("scroll", A), () => e.removeEventListener("scroll", A);
  }, [c, i]), U(() => {
    if (i !== "center")
      return;
    const e = a.current;
    if (!e)
      return;
    let r = -1, I = 0;
    const j = () => {
      const L = e.scrollWidth;
      L === r ? I++ : I = 0, r = L, I >= 2 ? e.scrollLeft = (L - e.clientWidth) / 2 : requestAnimationFrame(j);
    };
    requestAnimationFrame(j);
  }, [i, c]);
  const _ = (e) => t != null && t.hideOnMobile && !(h > E.mobile) ? !1 : i === "centerWithElementsBeforeAfter" ? e === "left" ? !w : !z : e === "left" ? S : b, D = (e, r) => s != null && s.enabled ? s != null && s.hideAtEdges ? i === "centerWithElementsBeforeAfter" ? !e : r : !0 : !1;
  return q(ee, {
    className: l.carouselContainer,
    "data-testId": "fadedCarousel",
    style: i !== "centerWithElementsBeforeAfter" ? {
      overflow: "hidden"
    } : {},
    children: [o(f, {
      if: D(w, S),
      children: o("div", {
        className: l.before
      })
    }), o(f, {
      if: _("left"),
      children: o(O, {
        onClick: Q,
        className: m(l.arrowLeft, l.carouselArrow, t != null && t.showBorder ? l.arrowBorder : ""),
        type: P.small,
        color: "--n000",
        hasCircle: !0,
        fillColor: (t == null ? void 0 : t.color) ?? "rgba(4, 5, 6, 0.7)",
        circleSize: (t == null ? void 0 : t.circleSize) ?? 48,
        style: {
          "--arrow-hover-color": t == null ? void 0 : t.hoverColor
        },
        children: T.arrowLeft
      })
    }), o(f, {
      if: i === "centerWithElementsBeforeAfter",
      children: q("div", {
        className: m(l.carouselItemsContainer, N),
        children: [o(V, {
          widthElement: n,
          margin: p,
          className: l.carouselItem,
          isFirstElement: !0,
          children: u
        }), K.map((e, r) => o("div", {
          style: {
            width: `${n}%`
          },
          className: m(l.carouselItem),
          children: e
        }, r)), o(V, {
          widthElement: n,
          margin: v,
          className: l.carouselItem,
          children: g
        })]
      })
    }), o(f, {
      if: i === "start" || i === "center",
      children: o("div", {
        className: m(l.carouselItemsContainer, l.carouselScroll, N),
        ref: a,
        children: c.map((e, r) => o("div", {
          className: l.carouselItem,
          children: e
        }, r))
      })
    }), o(f, {
      if: _("right"),
      children: o(O, {
        onClick: X,
        className: m(l.arrowRight, l.carouselArrow, t != null && t.showBorder ? l.arrowBorder : ""),
        type: P.small,
        color: "--n000",
        hasCircle: !0,
        fillColor: (t == null ? void 0 : t.color) ?? "rgba(4, 5, 6, 0.7)",
        circleSize: (t == null ? void 0 : t.circleSize) ?? 48,
        style: {
          "--arrow-hover-color": t == null ? void 0 : t.hoverColor
        },
        children: T.arrowRight
      })
    }), o(f, {
      if: D(z, b),
      children: o("div", {
        className: l.after
      })
    })]
  });
};
export {
  de as FadedCarousel
};
