import React, { MutableRefObject, ReactNode, useEffect, useRef } from 'react';

import Prism from 'prismjs';

// PERF: Prism used to import every bundled language (~574 KB lazy chunk). We now
// ship a curated subset covering the languages actually seen in chat. Imports
// MUST stay in dependency order (Prism component files assume their base grammar
// is already registered): base grammars (markup/css/clike/javascript) first,
// then languages that extend them (e.g. c→cpp, javascript→typescript,
// markup+javascript→jsx, jsx+typescript→tsx, markup→markdown).
import 'prismjs/components/prism-markup.js'; // markup / html / xml / svg
import 'prismjs/components/prism-css.js';
import 'prismjs/components/prism-clike.js';
import 'prismjs/components/prism-javascript.js'; // js
import 'prismjs/components/prism-json.js';
import 'prismjs/components/prism-yaml.js';
import 'prismjs/components/prism-bash.js'; // bash / shell / sh
import 'prismjs/components/prism-python.js';
import 'prismjs/components/prism-rust.js';
import 'prismjs/components/prism-go.js';
import 'prismjs/components/prism-java.js';
import 'prismjs/components/prism-c.js';
import 'prismjs/components/prism-cpp.js';
import 'prismjs/components/prism-csharp.js';
import 'prismjs/components/prism-sql.js';
import 'prismjs/components/prism-diff.js';
import 'prismjs/components/prism-docker.js';
import 'prismjs/components/prism-markdown.js';
import 'prismjs/components/prism-typescript.js'; // ts
import 'prismjs/components/prism-jsx.js';
import 'prismjs/components/prism-tsx.js';

import './ReactPrism.css';
// using classNames .prism-dark .prism-light from ReactPrism.css

export default function ReactPrism({
  children,
}: {
  children: (ref: MutableRefObject<null>) => ReactNode;
}) {
  const codeRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const el = codeRef.current;
    if (el) Prism.highlightElement(el);
  }, []);

  return <>{children(codeRef as MutableRefObject<null>)}</>;
}