import { yaml } from '@codemirror/lang-yaml'
import CodeMirror from '@uiw/react-codemirror'
import React from 'react'

type Props = {
  value: string
  onChange?: (value: string) => void
  readOnly?: boolean
  disabled?: boolean
  invalid?: boolean
}

export const CrYamlEditor: React.FC<Props> = ({
  value,
  onChange,
  readOnly = false,
  disabled = false,
  invalid = false
}) => (
  <CodeMirror
    value={value}
    height="420px"
    extensions={[yaml()]}
    readOnly={readOnly || disabled}
    onChange={(nextValue) => onChange?.(nextValue)}
    basicSetup={{
      lineNumbers: true,
      foldGutter: true,
      highlightActiveLine: !readOnly && !disabled
    }}
    style={{
      fontSize: 12,
      border: `1px solid ${invalid ? '#ff4d4f' : '#d9d9d9'}`,
      borderRadius: 4
    }}
  />
)