import React, { useState, useEffect } from 'react';
import RenderCodeBlock from '@theme/CodeBlock';

const CodeBlock = ({ example, file, section, language }) => {
  const [code, setCode] = useState('');

  useEffect(() => {
    let isMounted = true;

    const path =
      file === 'manifest' ? 'Cargo.toml' : `src/${file ?? 'main.rs'}`;

    import(`!!raw-loader!@site/examples/${example}/${path}`)
      .then((source) => {
        source = source.default.match(
          new RegExp(
            `(?:\/\/|#) <${section}>\n([\\s\\S]*)(?:\/\/|#) <\/${section}>`
          )
        )[1];

        if (isMounted) setCode(source);
      })
      .catch((err) => console.log(err));

    return () => {
      isMounted = false;
    };
  }, []);

  return (
    <RenderCodeBlock className={`language-${language ?? 'rust'}`}>
      {code}
    </RenderCodeBlock>
  );
};

export default CodeBlock;