import { jsx as o, jsxs as S } from "react/jsx-runtime";
import { forwardRef as re, useState as c, useRef as ie, useEffect as le, Children as ce, cloneElement as me } from "react";
import { noop as M, chunk as W, findIndex as ue } from "es-toolkit/compat";
import { AnimatePresence as pe, motion as de } from "motion/react";
import m from "../../utils/classNames.js";
import ge from "../../hooks/useAfterMount.js";
import fe from "../../hooks/useElementSize.js";
import Ce from "../../hooks/usePrevious.js";
const Ne = 10, he = { duration: 0.2 }, L = "page", ve = "pageBack", _ = "ColumnItem", Pe = {
  pageEnter: (n) => ({
    x: n === L ? "60%" : "-60%",
    opacity: 0
  }),
  pageCenter: () => ({ x: 0, opacity: 1 })
}, O = (n) => [...n.classList].includes(_) ? n : O(n.children[0]), Ee = re(
  (n, z) => {
    const {
      minColumnWith: h = 300,
      minColumns: v = 1,
      maxColumns: P = 5,
      stretchLastItems: F = !0,
      activePage: a = 0,
      asType: D = "div",
      onPreviousClick: H = M,
      onNextClick: $ = M,
      buttonClassName: xe = "",
      columnsWrapperClassName: j = "",
      className: U = "",
      disableAnimation: x = !1,
      children: r,
      ...V
    } = n, [s, u] = c(a), [t, y] = c(P), [K, X] = c(!1), [A, d] = c(!1), i = ie(null), [I] = fe(i), q = Ce(s), k = s > q ? L : ve;
    ge(() => {
      X(!0);
    });
    const [G, J] = c(a);
    Number.isFinite(a) && a !== G && (u(a), J(a));
    const T = (e, g) => {
      const f = W(r, g), p = ue(
        f,
        (C) => C.some((N) => N.key === e.dataset.key)
      );
      p !== s && u(p);
    };
    le(() => {
      if (!i.current)
        return;
      const e = O(i.current.children[0]);
      if (!e)
        return;
      const g = e.getBoundingClientRect().width, f = t - 1 >= v, p = t + 1 <= P, C = f && g + Ne <= h, N = p && (t + 1) * h <= I;
      if (d(!0), N) {
        const l = t + 1;
        y(l), T(e, l);
        return;
      }
      if (C) {
        const l = t - 1;
        y(l), T(e, l);
        return;
      }
    }, [I, i.current, r, t]);
    const Q = () => {
      d(!1);
      const e = s - 1;
      u(e), H(e, t);
    }, Y = () => {
      d(!1);
      const e = s + 1;
      u(e), $(e, t);
    };
    if (!r)
      return null;
    const Z = W(r, t)[s], b = v < r.length, ee = s === 0, w = s === Math.ceil(r.length / t) - 1, te = m(
      "ResponsiveColumnStripe",
      "display-flex align-items-center",
      "overflow-hidden",
      U
    ), B = m(
      "align-items-center",
      "align-self-stretch",
      "display-flex",
      "hover-scale-105",
      "hover-text-color-darkest",
      "padding-10",
      "cursor-pointer",
      "text-color-darker",
      "text-size-12"
    ), E = "pointer-events-none opacity-30", se = m(
      "PreviousButton",
      B,
      ee && E
    ), ne = m(
      "NextButton",
      B,
      w && E
    ), oe = m(
      "ColumnWrapper",
      "flex-1-1",
      "display-flex",
      j
    ), ae = w && !F ? "flex-0-1" : "flex-1-1", R = /* @__PURE__ */ o(D, { className: oe, children: ce.map(
      Z,
      (e) => me(e, {
        className: `${_} ${ae} ${e.props?.className || ""}`,
        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
        "data-key": e.key
      })
    ) });
    return /* @__PURE__ */ S("div", { ...V, ref: z, className: te, children: [
      b && /* @__PURE__ */ o("div", { className: se, onClick: Q, children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-chevron-left" }) }),
      /* @__PURE__ */ S("div", { className: "ColumnsArea flex-1-1 overflow-hidden", ref: i, children: [
        x || A ? R : null,
        !x && !A && /* @__PURE__ */ o(pe, { mode: "wait", custom: k, children: /* @__PURE__ */ o(
          de.div,
          {
            variants: Pe,
            initial: K ? "pageEnter" : !1,
            animate: "pageCenter",
            custom: k,
            transition: he,
            children: R
          },
          s
        ) })
      ] }),
      b && /* @__PURE__ */ o("div", { className: ne, onClick: Y, children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-chevron-right" }) })
    ] });
  }
);
export {
  Ee as default
};
//# sourceMappingURL=ResponsiveColumnStripe.js.map
