{"size": 1394, "ext": "js", "max_stars_repo_path": "client/components/Codemirror.js", "max_stars_repo_name": "jdiorio2393/CodeDojo", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/Codemirror.js", "max_issues_repo_name": "jdiorio2393/CodeDojo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/components/Codemirror.js", "max_forks_repo_name": "jdiorio2393/CodeDojo", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.8148148148, "max_line_length": 63, "alphanum_fraction": 0.5817790531}
import React from 'react';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';

// import context object
// import { CodeContext } from '../state/contexts';

function CodeBox({ codeBoxName }) {
  //   const { codeState } = useContext(CodeContext);

  //   let code;
  //   codeState.showSchema
  //     ? (code = codeState.schema)
  //     : (code = codeState.resolver);

  function handleChange(editor, data, value) {
    console.log(value);
  }

  return (
    <div>
      <div className='codebox-title'>{codeBoxName}</div>
      <div className='codebox'>
        <CodeMirror
          onChange={handleChange}
          className='code-mirror-container'
          value={codeBoxName}
          options={{
            lineWrapping: true,
            // theme: 'dracula',
            lineNumbers: true,
            cursorScrollMargin: 48,
            indentUnit: 2,
            tabSize: 2,
            styleActiveLine: true,
            smartIndent: true,
            lineWrapping: true,
            lint: true,
            mode: 'javascript',
            theme: 'material',
            lineNumbers: true,
          }}
        />
      </div>
    </div>
  );
}

export default CodeBox;
