import { javascript } from '@codemirror/lang-javascript';
import { yaml } from '@codemirror/lang-yaml';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { EditorView } from '@codemirror/view';
import { tags as t } from '@lezer/highlight';
import CodeMirror from '@uiw/react-codemirror';
import React from 'react';
var yamlHighlight = HighlightStyle.define([{
  tag: [t.tagName, t.propertyName, t.attributeName],
  color: '#ffd700'
}, {
  tag: t.string,
  color: '#ce9178'
}, {
  tag: t.number,
  color: '#ce9178'
}, {
  tag: t.atom,
  color: '#ce9178'
}, {
  tag: t.comment,
  color: '#6a9955'
}, {
  tag: t.keyword,
  color: '#ffd700'
}, {
  tag: t.operator,
  color: '#f8f8f2'
}, {
  tag: t.variableName,
  color: '#ffd700'
}, {
  tag: t.typeName,
  color: '#ffd700'
}]);
var darkTheme = EditorView.theme({
  '&': {
    backgroundColor: '#1e1e1e',
    color: '#f8f8f2',
    fontFamily: 'Menlo, Consolas, monospace'
  },
  '.cm-editor': {
    backgroundColor: '#1e1e1e',
    fontFamily: 'Menlo, Consolas, monospace',
    outline: 'none !important'
  },
  '.cm-scroller': {
    backgroundColor: '#1e1e1e',
    outline: 'none !important'
  },
  '.cm-content': {
    backgroundColor: '#1e1e1e',
    fontFamily: 'Menlo, Consolas, monospace',
    padding: 0,
    outline: 'none !important'
  },
  '.cm-gutters': {
    backgroundColor: '#1e1e1e',
    color: '#bfbfbf',
    border: 'none',
    fontFamily: 'Menlo, Consolas, monospace'
  },
  '.cm-activeLineGutter': {
    backgroundColor: '#1e1e1e'
  },
  '.cm-activeLine': {
    backgroundColor: '#1e1e1e'
  },
  '.cm-cursor': {
    borderLeft: '1px solid #f8f8f2'
  },
  '.cm-lineNumbers': {
    minWidth: '27px'
  },
  '.cm-line': {
    padding: '2px 8px',
    lineHeight: '1.3'
  },
  '&:focus-visible': {
    outline: 'none !important'
  },
  '&.cm-focused': {
    outline: 'none !important'
  }
});
var CodeMirrorWrapper = function CodeMirrorWrapper(_ref) {
  var content = _ref.content,
    options = _ref.options,
    onBeforeChange = _ref.onBeforeChange,
    _onChange = _ref.onChange;
  var extensions = [options.mode === 'yaml' ? yaml() : javascript({
    jsx: true
  }), EditorView.lineWrapping, darkTheme, syntaxHighlighting(yamlHighlight)];
  return /*#__PURE__*/React.createElement(CodeMirror, {
    value: content,
    height: "100%",
    extensions: extensions,
    onChange: function onChange(value) {
      onBeforeChange === null || onBeforeChange === void 0 || onBeforeChange(null, null, value);
      _onChange === null || _onChange === void 0 || _onChange(null, null, value);
    },
    readOnly: options.readOnly,
    placeholder: options.placeholder
  });
};
export default CodeMirrorWrapper;