"use client";
import { jsx as t, jsxs as n } from "react/jsx-runtime";
import { useGSAP as L } from "@gsap/react";
import d from "gsap";
import { ScrollTrigger as z } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/ScrollTrigger.es.js";
import { useRef as w } from "react";
import l from "../../modules/ExpandingDetails/expandingDetails.module.css";
import { Typography as y } from "../../components/Typography/Typography.es.js";
import { HighlightedTitle as F } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
d.registerPlugin(z);
const C = ({ colorScheme: p, label: S, title: W, sections: B }) => {
  const h = w(null), a = w({});
  return L(
    () => h.current ? ((() => {
      var P;
      a.current.timeline && a.current.timeline.kill(), a.current.matchMedia && a.current.matchMedia.kill();
      const i = d.utils.toArray('[data-scroll-id="section"]'), r = (P = h.current) == null ? void 0 : P.querySelector('[data-scroll-id="sections"]');
      if (!r) return;
      const q = d.matchMedia();
      a.current.matchMedia = q;
      const u = d.timeline({
        scrollTrigger: {
          trigger: h.current,
          start: "top top",
          end: () => `+=${i.length * 500}`,
          scrub: 1,
          markers: !1,
          pin: !0
        }
      });
      a.current.timeline = u;
      const b = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
      if (!b) return;
      const x = 1366, R = r.querySelectorAll('[data-scroll-id="content"]'), j = Array.from(R).map((e) => e.offsetHeight), o = Math.max(...j);
      i.forEach((e, N) => {
        q.add(
          {
            isMobile: `(max-width: ${x}px)`,
            isDesktop: `(min-width: ${x + 1}px)`
          },
          (I) => {
            var v, E, M, H, V, k, T, A, $, D, X;
            const s = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), m = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
            if (!s || !m) return;
            const g = I.conditions, f = g == null ? void 0 : g.isMobile, G = g == null ? void 0 : g.isDesktop;
            d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
              height: b.offsetHeight || 0
            }), d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
              scale: 1,
              yPercent: 0
            }), d.set(i[0], { height: s.offsetHeight + o }), d.set((v = i[0]) == null ? void 0 : v.querySelector('[data-scroll-id="section-title"]'), {
              scale: f ? 1 : 2,
              yPercent: 50
            }), d.set((E = i[0]) == null ? void 0 : E.querySelector('[data-scroll-id="section-index"]'), {
              scale: f ? 1 : 2,
              yPercent: 50
            }), G && (u.to(e, { height: s.offsetHeight + m.offsetHeight }).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
              { scale: 2, yPercent: 50 },
              "<"
            ).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
              { scale: 2, yPercent: 50 },
              "<"
            ).to(m, { height: o }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<"), N < i.length - 1 && u.to(e, { height: s.offsetHeight, delay: 0.5 }).to(
              e.nextElementSibling,
              { height: s.offsetHeight + o },
              "<"
            ).to(
              ((M = e.nextElementSibling) == null ? void 0 : M.querySelector(
                '[data-scroll-id="section-title"]'
              )) || null,
              { scale: 2, yPercent: 100 },
              "<"
            ).to(
              ((H = e.nextElementSibling) == null ? void 0 : H.querySelector(
                '[data-scroll-id="section-index"]'
              )) || null,
              { scale: 2, yPercent: 100 },
              "<"
            ).to(
              ((V = e.nextElementSibling) == null ? void 0 : V.querySelector('[data-scroll-id="content"]')) || null,
              { height: o, yPercent: 0 },
              "<"
            ).to(
              ((k = e.nextElementSibling) == null ? void 0 : k.querySelector('[data-scroll-id="protocol"]')) || null,
              { scale: 1 },
              "<"
            ).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
              { scale: 1, yPercent: -15 },
              "<"
            ).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
              { scale: 1, yPercent: -15 },
              "<"
            ).to(m, { height: 0, yPercent: 0 }, "<").to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'),
              { scale: 0, yPercent: 200 },
              "<"
            ).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
              { scale: 0, yPercent: 200 },
              "<"
            )), f && (u.to(e, { height: s.offsetHeight + o }).to(m, { height: o }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'), { scale: 1 }, "<"), N < i.length - 1 && u.to(e, { height: s.offsetHeight, delay: 0.5 }).to(
              e.nextElementSibling,
              { height: s.offsetHeight + o },
              "<"
            ).to(
              ((T = e.nextElementSibling) == null ? void 0 : T.querySelector(
                '[data-scroll-id="section-title"]'
              )) || null,
              { scale: 1 },
              "<"
            ).to(
              ((A = e.nextElementSibling) == null ? void 0 : A.querySelector(
                '[data-scroll-id="section-index"]'
              )) || null,
              { scale: 1 },
              "<"
            ).to(
              (($ = e.nextElementSibling) == null ? void 0 : $.querySelector('[data-scroll-id="content"]')) || null,
              { height: o, yPercent: 0 },
              "<"
            ).to(
              ((D = e.nextElementSibling) == null ? void 0 : D.querySelector('[data-scroll-id="protocol"]')) || null,
              { scale: 1 },
              "<"
            ).to(
              ((X = e.nextElementSibling) == null ? void 0 : X.querySelector(
                '[data-scroll-id="image-circle"]'
              )) || null,
              { scale: 1, yPercent: 5 },
              "<"
            ).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
              { scale: 1, yPercent: -15 },
              "<"
            ).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
              { scale: 1, yPercent: -15 },
              "<"
            ).to(m, { height: 0, yPercent: 0 }, "<").to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'),
              { scale: 0, yPercent: 200 },
              "<"
            ).to(
              e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
              { scale: 0, yPercent: 200 },
              "<"
            ));
          }
        );
      });
    })(), () => {
      a.current.timeline && a.current.timeline.kill(), a.current.matchMedia && a.current.matchMedia.kill();
    }) : void 0,
    {
      scope: h,
      dependencies: [h]
    }
  ), /* @__PURE__ */ t("div", { ref: h, className: `${l.root} ${l[p]}`, children: /* @__PURE__ */ n("div", { className: l.expandingDetailsWrapper, children: [
    /* @__PURE__ */ n("header", { "data-scroll-id": "header", className: l.header, children: [
      S && /* @__PURE__ */ t(y, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: S }),
      /* @__PURE__ */ t(
        F,
        {
          as: "div",
          defaultVariant: "displayMd",
          mobileVariant: "headingXl",
          colorScheme: p,
          className: l.title,
          title: W
        }
      )
    ] }),
    /* @__PURE__ */ t("div", { "data-scroll-id": "sections", className: l.sections, children: B.map((c, i) => /* @__PURE__ */ n(
      "div",
      {
        id: `section-${i + 1}`,
        "data-scroll-id": "section",
        className: l.section,
        children: [
          /* @__PURE__ */ n("div", { "data-scroll-id": "heading", className: l.heading, children: [
            /* @__PURE__ */ t("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ t(
              y,
              {
                as: "h3",
                defaultVariant: "headingMd",
                mobileVariant: "headingXs",
                className: l.sectionTitle,
                children: c.title
              }
            ) }),
            /* @__PURE__ */ t("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ n(
              y,
              {
                as: "p",
                defaultVariant: "headingSm",
                mobileVariant: "headingXs",
                className: l.sectionIndex,
                children: [
                  "(",
                  String(i + 1).padStart(2, "0"),
                  ")"
                ]
              }
            ) })
          ] }),
          /* @__PURE__ */ n("div", { "data-scroll-id": "content", className: l.content, children: [
            /* @__PURE__ */ n("div", { "data-scroll-id": "protocol", className: l.protocolWrapper, children: [
              c.subtitle && /* @__PURE__ */ t(
                y,
                {
                  as: "h4",
                  className: l.protocolSubtitle,
                  defaultVariant: "headingLg",
                  mobileVariant: "headingXs",
                  children: c.subtitle
                }
              ),
              /* @__PURE__ */ t(
                y,
                {
                  className: l.description,
                  as: "div",
                  defaultVariant: "bodyMd",
                  mobileVariant: "bodyXs",
                  children: c.description
                }
              )
            ] }),
            /* @__PURE__ */ t("div", { "data-scroll-id": "image-circle", className: l.imageCircle, children: /* @__PURE__ */ t("img", { src: c.image, alt: c.title }) })
          ] }),
          /* @__PURE__ */ t("div", { className: l.leftBorder }),
          /* @__PURE__ */ t("div", { className: l.rightBorder }),
          /* @__PURE__ */ t("div", { className: l.leftEyebrow }),
          /* @__PURE__ */ t("div", { className: l.rightEyebrow })
        ]
      },
      c.title
    )) })
  ] }) });
};
export {
  C as ExpandingDetails
};
