import { jsx as t, jsxs as w } from "react/jsx-runtime";
import { useState as E, useCallback as z, useEffect as C } from "react";
import { useRect as O } from "../../node_modules/.pnpm/react-use-rect@2.0.6_react@18.3.1/node_modules/react-use-rect/dist/index.esm.js";
import { Classes as j } from "../../constants/selectors.js";
import { LinkIcon as Z } from "../../icons/index.js";
import { cn as r } from "../../utils/cn.js";
import { copyToClipboard as _ } from "../../utils/copy-to-clipboard.js";
import { STEP_TITLE_SIZES as q } from "./constants.js";
import { Icon as F } from "../icon/icon.js";
const M = ({
  stepNumber: c = 1,
  icon: o,
  iconType: v,
  iconLibrary: m,
  title: s,
  children: n,
  titleSize: k = "p",
  className: $,
  isLast: P = !1,
  id: e,
  noAnchor: l = !1,
  scrollElementIntoView: N,
  onRegisterHeading: i,
  onUnregisterHeading: f,
  _hasContext: y,
  onCopyAnchorLink: u
}) => {
  const [x, R] = E(null), [S, B] = E(!1), [D] = O(R), I = q.includes(k) ? k : "p", p = ["h2", "h3"].includes(I), T = z(async () => {
    if (!p || l || !e || typeof window > "u")
      return;
    await _(
      `${window.location.href.split("#")[0]}#${encodeURIComponent(e)}`
    ) === "success" && (window.location.hash = encodeURIComponent(e), u == null || u(e));
  }, [p, e, l, u]);
  C(() => {
    if (y && e && x)
      return i == null || i(e, x), () => {
        f == null || f(e);
      };
  }, [x, e, y, i, f]), C(() => {
    if (!(!e || l))
      try {
        decodeURIComponent(window.location.hash.substring(1)) === e && (N == null || N(e));
      } catch {
      }
  }, []);
  const d = z(
    (a) => {
      !p || l || !e || B(a);
    },
    [p, l, e]
  ), h = {
    onMouseEnter: () => d(!0),
    onMouseLeave: () => d(!1),
    onClick: T
  }, L = typeof o == "string" ? /* @__PURE__ */ t(
    F,
    {
      className: "size-3 bg-stone-900 dark:bg-stone-50",
      icon: o,
      iconLibrary: m,
      iconType: v,
      overrideColor: !0,
      overrideSize: !0
    }
  ) : o ?? Number(c);
  return (
    // biome-ignore lint/a11y/useSemanticElements: TODO
    /* @__PURE__ */ w(
      "div",
      {
        className: r(
          j.Step,
          "group/step relative flex items-start pb-5",
          $
        ),
        "data-component-part": "step-item",
        id: e,
        ref: D,
        role: "listitem",
        children: [
          /* @__PURE__ */ t(
            "div",
            {
              className: r(
                "absolute top-11 h-[calc(100%-2.75rem)] w-px",
                P ? 'bg-linear-to-b from-stone-200 via-80% via-stone-200 to-transparent group-has-[[data-component-part="step-content"]:empty]/step:hidden dark:from-white/10 dark:via-white/10' : "bg-stone-200/70 dark:bg-white/10"
              ),
              contentEditable: !1,
              "data-component-part": "step-line"
            }
          ),
          /* @__PURE__ */ t(
            "div",
            {
              className: "absolute ml-[-13px] py-2",
              contentEditable: !1,
              "data-component-part": "step-number",
              children: /* @__PURE__ */ w(
                "div",
                {
                  className: "relative flex size-7 shrink-0 items-center justify-center rounded-full bg-stone-50 font-semibold text-stone-900 text-xs dark:bg-white/10 dark:text-stone-50",
                  onMouseEnter: () => d(!0),
                  onMouseLeave: () => d(!1),
                  children: [
                    /* @__PURE__ */ t("div", { className: r(S && "opacity-0"), children: L }),
                    p && !l && e && /* @__PURE__ */ t(
                      "div",
                      {
                        className: "absolute",
                        "data-component-part": "step-number-anchor-link",
                        children: /* @__PURE__ */ t(
                          "a",
                          {
                            "aria-label": "Navigate to header",
                            className: r(
                              "flex items-center border-0 opacity-0",
                              S && "opacity-100"
                            ),
                            href: `#${encodeURIComponent(e)}`,
                            onClick: (a) => {
                              a.preventDefault(), T();
                            },
                            children: /* @__PURE__ */ t("div", { className: "flex size-6 items-center justify-center", children: /* @__PURE__ */ t(Z, {}) })
                          }
                        )
                      }
                    )
                  ]
                }
              )
            }
          ),
          /* @__PURE__ */ w("div", { className: "w-full overflow-hidden pr-px pl-8", children: [
            !!s && (() => {
              const a = "mt-2 text-stone-900 dark:text-stone-200", b = {
                contentEditable: !1,
                "data-component-part": "step-title"
              };
              return {
                p: /* @__PURE__ */ t(
                  "p",
                  {
                    className: r(
                      a,
                      "prose dark:prose-invert font-semibold"
                    ),
                    ...b,
                    ...h,
                    children: s
                  }
                ),
                h2: /* @__PURE__ */ t(
                  "h2",
                  {
                    className: a,
                    ...b,
                    ...h,
                    children: s
                  }
                ),
                h3: /* @__PURE__ */ t(
                  "h3",
                  {
                    className: a,
                    ...b,
                    ...h,
                    children: s
                  }
                ),
                h4: /* @__PURE__ */ t(
                  "h4",
                  {
                    className: a,
                    ...b,
                    ...h,
                    children: s
                  }
                )
              }[I];
            })(),
            /* @__PURE__ */ t(
              "div",
              {
                className: r("prose dark:prose-invert", !s && "mt-2"),
                "data-component-part": "step-content",
                children: n
              }
            )
          ] })
        ]
      }
    )
  );
}, G = ({ children: c, titleSize: o, className: v }) => {
  const m = (Array.isArray(c) ? c : [c]).filter(
    Boolean
  );
  return (
    // biome-ignore lint/a11y/useSemanticElements: TODO
    /* @__PURE__ */ t(
      "div",
      {
        className: r(j.Steps, "mt-10 mb-6 ml-3.5", v),
        "data-component-part": "steps",
        role: "list",
        children: m.map(({ props: s }, n) => /* @__PURE__ */ t(
          M,
          {
            ...s,
            isLast: n === m.length - 1,
            stepNumber: s.stepNumber ?? n + 1,
            titleSize: s.titleSize ?? o
          },
          `step-${n}`
        ))
      }
    )
  );
};
G.Item = M;
export {
  G as Steps
};
