import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism.css';

import { VIEW_ACTION_TYPES } from '../../constants/define';
import { safeJsonParse } from '../../utilities/functions';
import { StepList } from '../common';

const FormattedCodeViewer = ({ formatOption, formatedCode }) => {
  return (
    <>
      {formatOption === VIEW_ACTION_TYPES.STEPS ? (
        <StepList steps={safeJsonParse(formatedCode)} />
      ) : (
        <Editor
          contentEditable={false}
          value={formatedCode}
          onValueChange={() => {}}
          highlight={(code) => highlight(code, formatOption === VIEW_ACTION_TYPES.JSON ? languages.json : languages.js)}
          padding={10}
          style={{
            fontFamily: '"Fira code", "Fira Mono", monospace',
            fontSize: 12,
          }}
        />
      )}
    </>
  );
};

export default FormattedCodeViewer;
