import fs from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))
const FONTS_DIR = path.join(__dirname, '../../resources/fonts')

const FONT_FACES = [
  { family: 'Excalifont',    file: 'Excalifont-Regular.woff2' },
  { family: 'Cascadia Code', file: 'Cascadia.woff2' },
]

// Make slides that contain an inlined diagram into a flex column so the
// diagram wrapper claims the slide height below any heading.
const LAYOUT = `
:has(> .excalidraw-stage) { display: flex !important; flex-direction: column !important; }
.excalidraw-stage { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.excalidraw-stage > svg { max-width: 100%; max-height: 100%; }
`.trim()

export function fontStyleBlock() {
  const rules = FONT_FACES.map(({ family, file }) => {
    const base64 = fs.readFileSync(path.join(FONTS_DIR, file)).toString('base64')
    return `@font-face { font-family: '${family}'; src: url('data:font/woff2;base64,${base64}'); }`
  }).join(' ')
  return `<style>${rules} ${LAYOUT}</style>`
}
