"use client";
import { useGSAP as nt } from "@gsap/react";
import o from "gsap";
import { Flip as M } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/Flip.es.js";
import { Draggable as U } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/Draggable.es.js";
import { useState as x, useRef as a, useCallback as ot } from "react";
o.registerPlugin(M);
o.registerPlugin(U);
const W = 12, dt = ({ images: r }) => {
  if (r.length > 0 && r.length < W) {
    const t = [...r];
    for (; r.length < W; )
      r.push(...t);
  }
  const [d, F] = x(0), R = a(d);
  R.current = d;
  const [m, z] = x(!1), G = a(null), e = a(null), p = a([]), I = a(null), A = a(null), V = a(null), B = a(null), l = ["atom", "small", "medium", "large", "medium", "small", "atom"], P = ["atom", "small", "medium", "large", "x-large", "large", "medium", "small", "atom"], [L, T] = x(0), [f, b] = x(
    typeof window != "undefined" && window.innerWidth <= 930 ? l : P
  ), j = l.indexOf("large"), J = f.indexOf("x-large"), N = o.matchMedia(), C = ot(
    (t) => {
      var _, $, H, K;
      if (!e.current) return;
      let i = 0;
      if (window.innerWidth <= 930) {
        const c = e.current.querySelector('[data-size="large"]');
        i = c ? c.offsetHeight : 0;
      } else {
        const c = e.current.querySelector('[data-size="x-large"]');
        i = c ? c.offsetHeight : 0, o.set(e.current, {
          x: 0
        });
      }
      if (i > 0 && (T(i), o.set(e.current, {
        height: i
      })), o.set((_ = e.current) == null ? void 0 : _.querySelectorAll("[data-size]"), {
        y: 0
      }), !p.current.length) return;
      const s = ($ = e.current) == null ? void 0 : $.querySelector('[data-size="x-large"]'), n = s == null ? void 0 : s.getBoundingClientRect(), g = (H = e.current) == null ? void 0 : H.querySelector('[data-size="large"]'), u = g == null ? void 0 : g.getBoundingClientRect();
      N.add(
        {
          isMobile: "(max-width: 930px)",
          isDesktop: "(min-width: 931px)"
        },
        (c) => {
          var k, q, D;
          const { isDesktop: O, isMobile: tt } = c.conditions || {};
          if (T(((k = e.current) == null ? void 0 : k.offsetHeight) || 0), tt) {
            if (b(l), o.set(e.current, {
              height: L || ((q = e.current) == null ? void 0 : q.offsetHeight) || "auto"
            }), !u) return;
            const h = window.innerWidth / 2, E = u.right - u.width / 2, S = h - E;
            o.set(e.current, {
              x: `+=${S}`
            });
            const et = h - u.width / 2;
            o.set(I.current, {
              width: u.width,
              marginLeft: et
            }), p.current.forEach((y, v) => {
              y && v < l.length && (l.forEach((rt) => {
                y.classList.remove(`size-${rt}`);
              }), y.classList.add(`size-${l[v]}`));
            });
          }
          O && (b(P), o.set(e.current, {
            height: L || ((D = e.current) == null ? void 0 : D.offsetHeight) || "auto"
          }), o.set(I.current, {
            width: n ? n.width : "auto",
            marginLeft: n ? n.left : 0
          }), p.current.forEach((h, E) => {
            h && E < f.length && (f.forEach((S) => {
              h.classList.remove(`size-${S}`);
            }), h.classList.add(`size-${f[E]}`));
          }));
        }
      ), (((K = I.current) == null ? void 0 : K.querySelectorAll(".description-item")) || []).forEach((c, O) => {
        c.style.zIndex = `${r.length - O}`;
      }), z(!0), B.current = M.getState(p.current, {
        simple: !0
      }), F(t), o.delayedCall(0, () => {
        M.from(B.current, {
          duration: 0.3,
          ease: "power3.out",
          absolute: !0,
          onComplete: () => {
            z(!1);
          }
        }), o.fromTo(
          A.current,
          {
            opacity: 0,
            y: 20
          },
          {
            opacity: 1,
            y: 0,
            duration: 0.5,
            ease: "power3.out",
            onComplete: () => {
              B.current = null;
            }
          }
        );
      });
    },
    [f, l, r.length, L]
  ), Q = () => {
    if (m) return;
    const t = (d - 1 + r.length) % r.length;
    C(t);
  }, X = () => {
    if (m) return;
    const t = (d + 1) % r.length;
    C(t);
  };
  function Y(t, i) {
    const s = [];
    if (typeof window != "undefined" && window.innerWidth <= 930)
      for (let n = 0; n < l.length; n++)
        s.push(t[(i + n) % t.length]);
    else
      for (let n = 0; n < f.length; n++)
        s.push(t[(i + n) % t.length]);
    return s;
  }
  const Z = Y(r, d);
  return nt(() => {
    C(d);
    const t = e.current;
    t && N.add("(max-width: 930px)", () => {
      const i = { x: 0 }, s = U.create(t, {
        type: "x",
        onDragStart: () => {
          m || (i.x = t.scrollLeft + t.getBoundingClientRect().left);
        },
        onDragEnd: () => {
          const g = t.scrollLeft + t.getBoundingClientRect().left - i.x, u = 20;
          if (g > u) {
            if (m) return;
            const w = (R.current - 1 + r.length) % r.length;
            C(w);
          } else if (g < -u) {
            if (m) return;
            const w = (R.current + 1) % r.length;
            C(w);
          }
        }
      });
      return () => {
        s[0] && s[0].kill();
      };
    });
  }, []), {
    MOBILE_BREAKPOINT: 930,
    containerRef: G,
    carouselRef: e,
    imageRefs: p,
    descriptionRef: I,
    descriptionItemRef: A,
    progressButtonContainerRef: V,
    visible: Z,
    cardSizes: f,
    handleCustomPrevClick: Q,
    handleCustomNextClick: X,
    current: d,
    mobileCardIndex: j,
    xLargeCardIndex: J
  };
};
export {
  dt as useComplexImageCarousel
};
