"use client";
import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { useMemo as g } from "react";
import { Swiper as v, SwiperSlide as b } from "swiper/react";
/* empty css                                                                             */
import { cn as f } from "../../../../utils/cn/cn.es.js";
import { useSwiper as S } from "../../../../utils/useSwiper/useSwiper.es.js";
import { distributePoints as w } from "./utils.es.js";
import a from "../../../../modules/TrackProgress/components/TimelineContent/timelineContent.module.css";
import { Typography as n } from "../../../../components/Typography/Typography.es.js";
const y = [
  { key: "optimal", label: "Optimal" },
  { key: "inRange", label: "In Range" },
  { key: "outOfRange", label: "Out of Range" }
], X = ({ tabs: r }) => {
  const { activeIndex: m, onSwiperInit: d, handleSlideTo: c, handleSlideChange: p, handleSwiperResize: h } = S(), u = g(
    () => r.map((i) => w(i.optimal, i.inRange, i.outOfRange)),
    [r]
  );
  return /* @__PURE__ */ e("div", { className: a.root, children: /* @__PURE__ */ s("div", { className: a.container, children: [
    /* @__PURE__ */ e(
      v,
      {
        onSwiper: d,
        onResize: h,
        onSlideChange: p,
        slidesPerView: 1,
        allowTouchMove: r.length > 1,
        spaceBetween: 0,
        initialSlide: 0,
        className: a.swiper,
        children: r.map((i, t) => /* @__PURE__ */ e(b, { children: /* @__PURE__ */ s("div", { className: a.content, children: [
          /* @__PURE__ */ e("div", { className: a.metricsContainer, children: y.map((l, o) => /* @__PURE__ */ s("div", { className: a.metric, children: [
            /* @__PURE__ */ e(
              n,
              {
                defaultVariant: "displayLg",
                mobileVariant: "displaySm",
                weight: "regular",
                children: i[l.key]
              }
            ),
            /* @__PURE__ */ s("div", { className: a.metricTitle, children: [
              /* @__PURE__ */ e(
                n,
                {
                  as: "div",
                  defaultVariant: "labelSm",
                  mobileVariant: "labelXs",
                  emphasis: !0,
                  weight: "regular",
                  children: "("
                }
              ),
              /* @__PURE__ */ e(
                n,
                {
                  as: "div",
                  defaultVariant: "labelSm",
                  mobileVariant: "labelXs",
                  emphasis: !0,
                  weight: "regular",
                  children: l.label
                }
              ),
              /* @__PURE__ */ e("div", { className: a.circle, "data-value": l.key }),
              /* @__PURE__ */ e(
                n,
                {
                  as: "div",
                  defaultVariant: "labelSm",
                  mobileVariant: "labelXs",
                  emphasis: !0,
                  weight: "regular",
                  children: ")"
                }
              )
            ] })
          ] }, `${l.key}_${o}`)) }),
          /* @__PURE__ */ e("div", { className: a.canvas, children: u[t].map((l, o) => /* @__PURE__ */ e("div", { className: a.circle, "data-value": l }, o)) })
        ] }) }, i.label))
      }
    ),
    /* @__PURE__ */ e("div", { className: a.tabsContainer, children: r.map((i, t) => /* @__PURE__ */ e(
      "button",
      {
        className: f(a.tab, m === t && a.tabActive),
        onClick: () => c(t),
        children: /* @__PURE__ */ e(n, { defaultVariant: "labelMd", mobileVariant: "labelXs", emphasis: !0, weight: "regular", children: i.label })
      },
      i.label
    )) })
  ] }) });
};
export {
  X as TimelineContent
};
