import * as React from 'react';
import PropTypes from 'prop-types';

import InitialCodeBlock from '@theme-init/CodeBlock';

import { CodeOutput } from './CodeOutput';

const styles = {
  container: {},
  output: {
    position: 'relative',
    padding: '1.25em 1em 0em 1em'
  }
};

export default function CodeBlock(props) {
  const { children, showOutput, reverse = false, open = true } = props;

  let content = [];
  content.push(<InitialCodeBlock {...props} key="code" />);

  if (showOutput) {
    let outputContent = <CodeOutput code={children} key="output" />;
    if (typeof open === 'string') {
      // TODO: to improve performance, render content only when open is yes.
      outputContent = (
        <details key="output" open={open === 'yes'}>
          <summary>
            <strong>Show Output</strong>
          </summary>
          {outputContent}
        </details>
      );
    }
    content.push(outputContent);
  }
  if (reverse) content = content.reverse();
  return content;
}

@@ -28,44 +28,8 @@
 ct';
-%0Aimport PropTypes from 'prop-types';
 %0A%0Aim
@@ -340,15 +340,8 @@
 pen 
-= true 
 %7D = 
@@ -347,16 +347,194 @@
  props;%0A
+  const %5BisMounted, setMount%5D = React.useState(false);%0A  const %5BdetailsOpen, toggleOpen%5D = React.useState(open === 'yes');%0A  React.useEffect(() =%3E %7B%0A    setMount(true);%0A  %7D, %5B%5D);
 %0A  let c
@@ -606,17 +606,16 @@
 e%22 /%3E);%0A
-%0A
   if (sh
@@ -622,24 +622,107 @@
 owOutput) %7B%0A
+    const handleToggle = () =%3E %7B%0A      toggleOpen((prevOpen) =%3E !prevOpen);%0A    %7D;%0A
     let outp
@@ -818,85 +818,8 @@
 ) %7B%0A
-      // TODO: to improve performance, render content only when open is yes.%0A
     
@@ -854,16 +854,26 @@
 %3Cdetails
+%0A         
  key=%22ou
@@ -881,206 +881,405 @@
 put%22
- open=%7Bopen === 'yes'%7D%3E%0A          %3Csummary%3E%0A            %3Cstrong%3EShow Output%3C/strong%3E%0A          %3C/summary%3E%0A          %7BoutputContent%7D%0A        %3C/details%3E%0A      );%0A    %7D%0A    content.push(outputContent);
+%0A          open=%7BdetailsOpen%7D%0A          onToggle=%7BisMounted ? handleToggle : undefined%7D%0A        %3E%0A          %3Csummary%3E%0A            %3Cstrong%3EShow Output%3C/strong%3E%0A          %3C/summary%3E%0A          %7BdetailsOpen && %3CCodeOutput code=%7Bchildren%7D key=%22output%22 /%3E%7D%0A        %3C/details%3E%0A      );%0A      content.push(outputContent);%0A    %7D else %7B%0A      content.push(%3CCodeOutput code=%7Bchildren%7D key=%22output%22 /%3E);%0A    %7D
 %0A  %7D

Update CodeBlock to not render output