import { jsxs as m, jsx as t } from "react/jsx-runtime";
import { forwardRef as v, useState as N, useMemo as j, useCallback as I, useEffect as E } from "react";
import { useRect as $ } 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 R } from "../../constants/selectors.js";
import { LinkIcon as S } from "../../icons/index.js";
import { cn as z } from "../../utils/cn.js";
import { copyToClipboard as B } from "../../utils/copy-to-clipboard.js";
const C = v(
  ({
    children: f,
    label: u,
    id: e,
    description: n,
    tags: p,
    className: x,
    "aria-label": h = "Navigate to changelog",
    onRegisterHeading: a,
    onUnregisterHeading: l,
    hasContext: d,
    isVisible: s,
    onCopyAnchorLink: o,
    ...w
  }, k) => {
    const [c, y] = N(null), [b] = $(y), i = j(
      () => [...new Set((p ?? []).map((r) => r.trim()).filter(Boolean))],
      [p]
    ), g = I(async () => {
      if (typeof window > "u")
        return;
      await B(
        `${window.location.href.split("#")[0]}#${encodeURIComponent(e)}`
      ) === "success" && (window.location.hash = encodeURIComponent(e), o == null || o(e));
    }, [e, o]);
    return E(() => {
      if (d && s && c)
        return a == null || a(e, c), () => {
          l == null || l(e);
        };
    }, [
      c,
      e,
      d,
      s,
      a,
      l
    ]), s ? /* @__PURE__ */ m(
      "div",
      {
        className: z(
          R.Update,
          "update-container relative flex w-full flex-col items-start gap-2 py-8 lg:flex-row lg:gap-6",
          x
        ),
        id: e,
        ref: k,
        ...w,
        children: [
          /* @__PURE__ */ m("div", { className: "group top-(--scroll-mt) flex w-full shrink-0 flex-col items-start justify-start lg:sticky lg:w-[160px]", children: [
            /* @__PURE__ */ t("div", { className: "absolute", children: /* @__PURE__ */ m(
              "a",
              {
                "aria-label": h,
                className: "group/link -ml-10 flex items-center border-0 opacity-0 focus:opacity-100 focus:outline-0 group-hover:opacity-100",
                href: `#${encodeURIComponent(e)}`,
                children: [
                  "​",
                  /* @__PURE__ */ t("div", { className: "flex size-6 items-center justify-center rounded-md bg-white text-stone-400 shadow-sm ring-1 ring-stone-400/30 hover:ring-stone-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-stone-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150", children: /* @__PURE__ */ t(S, {}) })
                ]
              }
            ) }),
            /* @__PURE__ */ t(
              "div",
              {
                className: "flex grow-0 cursor-pointer items-center justify-center rounded-lg bg-primary/10 px-2 py-1 font-medium text-primary text-sm dark:text-primary-light",
                contentEditable: !1,
                "data-component-part": "update-label",
                onClick: g,
                children: u
              }
            ),
            i.length > 0 && /* @__PURE__ */ t(
              "div",
              {
                className: "mt-3 flex flex-wrap gap-2 px-1 text-secondary text-sm dark:text-secondary-light",
                "data-component-part": "update-tag-list",
                children: i.map((r) => /* @__PURE__ */ t(
                  "span",
                  {
                    className: "inline-block rounded-lg font-medium text-sm",
                    "data-component-part": "update-tag",
                    children: r
                  },
                  r
                ))
              }
            ),
            n && /* @__PURE__ */ t(
              "div",
              {
                className: "wrap-break-word mt-3 max-w-[160px] px-1 text-secondary text-sm dark:text-secondary-light",
                contentEditable: !1,
                "data-component-part": "update-description",
                children: n
              }
            )
          ] }),
          /* @__PURE__ */ t("div", { className: "max-w-full flex-1 overflow-hidden px-0.5", ref: b, children: /* @__PURE__ */ t("div", { className: "prose-sm", "data-component-part": "update-content", children: f }) })
        ]
      }
    ) : null;
  }
);
C.displayName = "Update";
export {
  C as Update
};
