import { useCustomFonts } from './use-custom-fonts';

/**
 * A family name is free text the operator typed. It ends up inside a CSS
 * string, so quote and backslash are escaped and everything that could end
 * the declaration, the rule or the `<style>` element is dropped. Site Admins
 * are trusted with far more than this, but a rule that silently breaks the
 * whole stylesheet on an apostrophe would be a bug either way.
 */
function cssFamily(family: string): string {
  return family.replace(/[\\'<>{};\r\n]/g, '');
}

/**
 * `@font-face` rules for the operator-uploaded families (issue #304).
 *
 * Catalog families are declared in the generated `public/fonts/catalog.css`,
 * which the build writes and `index.html` links. Uploaded ones only exist at
 * runtime, so their rules are injected here — same shape, same `swap`
 * behaviour, bytes from the api's public font route.
 *
 * Without this the pickers would offer families the browser cannot resolve:
 * `fontStack` names them, nothing declares them, and the text renders in the
 * system fallback.
 */
export function CustomFontFaces(): React.JSX.Element | null {
  const fonts = useCustomFonts();
  if (fonts.length === 0) return null;
  const css = fonts
    .flatMap((font) =>
      font.weights.map(
        (weight) =>
          `@font-face { font-family: '${cssFamily(font.family)}'; font-style: normal;` +
          ` font-weight: ${weight}; font-display: swap;` +
          ` src: url('/api/v1/fonts/custom/${font.slug}/${font.slug}-${weight}.woff2') format('woff2'); }`,
      ),
    )
    .join('\n');
  return <style data-custom-fonts="">{css}</style>;
}