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

import Prism from 'prismjs';

import 'prismjs/components/prism-markup.js';
import 'prismjs/components/prism-css.js';
import 'prismjs/components/prism-clike.js';
import 'prismjs/components/prism-javascript.js';
import 'prismjs/components/prism-jsx.js';
import 'prismjs/components/prism-typescript.js';
import 'prismjs/components/prism-tsx.js';
import 'prismjs/components/prism-bash.js';
import 'prismjs/components/prism-json.js';
import 'prismjs/components/prism-yaml.js';
import 'prismjs/components/prism-markdown.js';
import 'prismjs/components/prism-python.js';
import 'prismjs/components/prism-go.js';
import 'prismjs/components/prism-rust.js';
import 'prismjs/components/prism-java.js';
import 'prismjs/components/prism-kotlin.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-docker.js';
import 'prismjs/components/prism-diff.js';
import 'prismjs/components/prism-regex.js';
import 'prismjs/components/prism-ini.js';
import 'prismjs/components/prism-toml.js';
import 'prismjs/components/prism-swift.js';
import 'prismjs/components/prism-ruby.js';
import 'prismjs/components/prism-php.js';
import 'prismjs/components/prism-scss.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>)}</>;
}
