import React from 'react';
import { SilkeBox } from '../silke-box';

import CodeMirror from '@uiw/react-codemirror';
import { dracula } from '@uiw/codemirror-theme-dracula';
import { javascript } from '@codemirror/lang-javascript';
import { css } from '@codemirror/lang-css';
import { json } from '@codemirror/lang-json';

export type Props = {
  code: string;
  onChange?: (code: string) => void;
  language?: 'javascript' | 'json' | 'css';
  lineNumbers?: boolean;
};

export default function CodeEditor({
  onChange,
  code,
  language = 'javascript',
  lineNumbers,
}: Props) {
  const languages = {
    javascript: javascript({ jsx: true }),
    css: css(),
    json: json(),
  };

  return (
    <SilkeBox
      flex
      style={{
        background: 'rgba(40, 42, 54)',
        height: '100%',
        border: '1px solid var(--color-neutral-40)',
        overflow: 'auto',
      }}
    >
      <CodeMirror
        value={code}
        extensions={[languages[language]]}
        editable={!!onChange}
        onChange={onChange}
        theme={dracula}
        style={{ width: '100%', height: '100%' }}
        basicSetup={{
          lineNumbers,
        }}
      />
    </SilkeBox>
  );
}