import { Fragment } from 'react'
import GlossaryMark from '../components/GlossaryMark'
import { GLOSSARY } from '../glossary/terms'

function escapeRegExp(value: string): string {
  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

const MATCH_TO_ID = new Map<string, string>()
for (const entry of GLOSSARY) {
  for (const surface of entry.match) {
    MATCH_TO_ID.set(surface, entry.id)
  }
}

const ALL_SURFACES = [...MATCH_TO_ID.keys()].sort((a, b) => b.length - a.length)
const GLOSSARY_REGEX = new RegExp(`\\b(${ALL_SURFACES.map(escapeRegExp).join('|')})\\b`, 'g')

/** Wraps every occurrence of a known glossary term in `text` with a hoverable, linked <GlossaryMark>. */
export function linkify(text: string): React.ReactNode {
  const parts = text.split(GLOSSARY_REGEX)
  if (parts.length === 1) return text

  return parts.map((part, i) => {
    const id = MATCH_TO_ID.get(part)
    if (id === undefined) return <Fragment key={i}>{part}</Fragment>
    return (
      <GlossaryMark key={i} id={id}>
        {part}
      </GlossaryMark>
    )
  })
}