"use client";
import { jsxs as m, jsx as n, Fragment as V } from "react/jsx-runtime";
import { useState as A, useRef as h, useCallback as f, useEffect as M } from "react";
import { cn as p } from "../../utils/cn/cn.es.js";
import r from "../../components/StepsCarousel/stepsCarousel.module.css";
import { Label as N } from "../Label/Label.es.js";
import { Typography as b } from "../Typography/Typography.es.js";
import { ProgressButton as x } from "../ProgressButton/ProgressButton.es.js";
const S = 50, W = ({ steps: u, colorScheme: i }) => {
  const [a, k] = A(0), v = h(null), g = h([]), c = h(null), d = h(null), C = f((e) => {
    c.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
  }, []), s = f((e) => {
    var t;
    k(e), (t = g.current[e]) == null || t.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
  }, []), y = f(() => {
    if (c.current !== null && d.current !== null) {
      const e = d.current - c.current.x;
      let t = a;
      e > S && a > 0 ? t = a - 1 : e < -S && a < u.length - 1 && (t = a + 1), t !== a && s(t);
    }
    c.current = null, d.current = null;
  }, [a, u.length, s]);
  return M(() => {
    const e = v.current;
    if (!e) return;
    const t = (l) => {
      if (c.current === null) return;
      const o = l.touches[0].clientX, E = l.touches[0].clientY, T = Math.abs(o - c.current.x), X = Math.abs(E - c.current.y);
      T > X && (l.preventDefault(), d.current = o);
    };
    return e.addEventListener("touchmove", t, { passive: !1 }), () => {
      e.removeEventListener("touchmove", t);
    };
  }, []), /* @__PURE__ */ m("div", { className: r.root, "data-scheme": i, children: [
    /* @__PURE__ */ n(
      "div",
      {
        ref: v,
        className: r.stepsContainer,
        "data-scheme": i,
        onTouchStart: C,
        onTouchEnd: y,
        children: u.map((e, t) => {
          const l = a === t;
          return /* @__PURE__ */ m(
            "button",
            {
              ref: (o) => {
                o && (g.current[t] = o);
              },
              className: p(r.card, {
                [r.cardActive]: l
              }),
              onClick: () => s(t),
              type: "button",
              children: [
                /* @__PURE__ */ n("div", { className: p(r.imageWrapper, l && r.imageWrapperActive), children: /* @__PURE__ */ n("img", { src: e.image, alt: e.title, className: r.image }) }),
                /* @__PURE__ */ n("div", { className: r.stepLabel, children: l ? /* @__PURE__ */ m(V, { children: [
                  /* @__PURE__ */ n("div", { className: r.desktop, children: /* @__PURE__ */ n(N, { size: "lg", color: i === "dark" ? "white" : "black", children: e.name || `Step ${t + 1}` }) }),
                  /* @__PURE__ */ n("div", { className: r.mobile, children: /* @__PURE__ */ n(N, { size: "sm", color: i === "dark" ? "white" : "black", children: e.name || `Step ${t + 1}` }) })
                ] }) : /* @__PURE__ */ n(
                  b,
                  {
                    defaultVariant: "labelSm",
                    mobileVariant: "labelXs",
                    emphasis: !0,
                    className: r.labelText,
                    children: e.name || `Step ${t + 1}`
                  }
                ) }),
                /* @__PURE__ */ m("div", { className: r.textContainer, children: [
                  /* @__PURE__ */ n(b, { as: "h3", defaultVariant: "headingSm", mobileVariant: "headingXxs", children: e.title }),
                  e.description && /* @__PURE__ */ n(
                    b,
                    {
                      as: "p",
                      defaultVariant: "bodyMd",
                      mobileVariant: "bodySm",
                      className: r.cardDescription,
                      children: e.description
                    }
                  )
                ] })
              ]
            },
            `step-${t}`
          );
        })
      }
    ),
    /* @__PURE__ */ n("div", { className: p(r.mobile, r.progressButtonContainer), children: /* @__PURE__ */ n(
      x,
      {
        invert: i === "dark",
        left: {
          disabled: a <= 0,
          onClick: () => s(a - 1)
        },
        right: {
          disabled: a >= u.length - 1,
          onClick: () => s(a + 1)
        }
      }
    ) })
  ] });
};
export {
  W as StepsCarousel
};
