"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var AUTO_ID_PREFIX = "__hex_cloze_auto_";
function normalize(parts) {
  let blankIndex = 0;
  const fragments = parts.map((p) => {
    if (typeof p === "string") return p;
    const id = p.id ?? `${AUTO_ID_PREFIX}${blankIndex}`;
    const out = { hidden: p.hidden, id, blankIndex };
    blankIndex++;
    return out;
  });
  return { fragments, total: blankIndex };
}
function Cloze({ parts, revealMode = "click", onReveal, className, ...rest }) {
  const { fragments, total } = React.useMemo(() => normalize(parts), [parts]);
  const [revealed, setRevealed] = React.useState(() => /* @__PURE__ */ new Set());
  const onRevealRef = React.useRef(onReveal);
  onRevealRef.current = onReveal;
  const update = React.useCallback((next) => {
    setRevealed(next);
    onRevealRef.current?.(Array.from(next));
  }, []);
  const toggleBlank = React.useCallback(
    (id) => {
      const next = new Set(revealed);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      update(next);
    },
    [revealed, update]
  );
  const allRevealed = total > 0 && revealed.size === total;
  const toggleAll = React.useCallback(() => {
    if (allRevealed) {
      update(/* @__PURE__ */ new Set());
    } else {
      const next = /* @__PURE__ */ new Set();
      for (const f of fragments) if (typeof f !== "string") next.add(f.id);
      update(next);
    }
  }, [allRevealed, fragments, update]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...rest,
      "data-hex-cloze": true,
      "data-all-revealed": allRevealed,
      className: cn("text-base leading-relaxed", className),
      children: [
        /* @__PURE__ */ jsx("p", { "data-hex-cloze-text": true, children: fragments.map((f, i) => {
          if (typeof f === "string") return /* @__PURE__ */ jsx(React.Fragment, { children: f }, `s-${i}`);
          const isRevealed = revealed.has(f.id);
          return /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              "data-hex-cloze-blank": true,
              "data-blank-id": f.id,
              "data-revealed": isRevealed,
              "aria-pressed": isRevealed,
              "aria-label": isRevealed ? `Blank ${f.blankIndex + 1} revealed: ${f.hidden}. Activate to hide.` : `Blank ${f.blankIndex + 1} of ${total}. Activate to reveal.`,
              onClick: () => toggleBlank(f.id),
              className: cn(
                "mx-0.5 inline-block rounded px-1.5 py-0 align-baseline transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                isRevealed ? "bg-primary/10 text-foreground underline decoration-primary decoration-dotted underline-offset-4" : "select-none bg-muted text-transparent"
              ),
              children: f.hidden
            },
            f.id
          );
        }) }),
        revealMode === "all" && total > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            "data-hex-cloze-toggle-all": true,
            "aria-label": allRevealed ? "Hide all blanks" : "Reveal all blanks",
            onClick: toggleAll,
            className: "rounded-md border bg-background px-3 py-1 text-xs font-medium text-foreground transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98] hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            children: allRevealed ? "Hide all" : "Reveal all"
          }
        ) }) : null
      ]
    }
  );
}

export { Cloze };
//# sourceMappingURL=cloze.js.map
//# sourceMappingURL=cloze.js.map