import { useCSSVariable } from "uniwind";

import { MOBILE_TYPOGRAPHY } from "../../../lib/typography";

const TEXT_ROLE_VARIABLES = {
  micro: "--text-3xs",
  caption: "--text-2xs",
  label: "--text-xs",
  footnote: "--text-sm",
  body: "--text-base",
  headline: "--text-lg",
  title: "--text-xl",
  largeTitle: "--text-2xl",
  display: "--text-3xl",
} as const satisfies Record<keyof typeof MOBILE_TYPOGRAPHY, string>;

export interface ScaledTextRole {
  readonly fontSize: number;
  readonly lineHeight: number;
}

/**
 * Reads a typography role's current size from the Uniwind `--text-*` CSS
 * variables (scaled at runtime with the base font size). Use for style-prop
 * consumers that can't express their size as a `text-*` className. Reactive:
 * re-renders when the appearance provider re-injects the variables.
 */
export function useScaledTextRole(role: keyof typeof MOBILE_TYPOGRAPHY): ScaledTextRole {
  const variable = TEXT_ROLE_VARIABLES[role];
  const [fontSize, lineHeight] = useCSSVariable([variable, `${variable}--line-height`]);

  return {
    fontSize: typeof fontSize === "number" ? fontSize : MOBILE_TYPOGRAPHY[role].fontSize,
    lineHeight: typeof lineHeight === "number" ? lineHeight : MOBILE_TYPOGRAPHY[role].lineHeight,
  };
}