/**
 * Query Editor Component
 * 
 * Syntax-highlighted SPARQL query editor using CodeMirror.
 */

import { type FC } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import './QueryEditor.css';

interface QueryEditorProps {
  value: string;
  onChange: (value: string) => void;
  readOnly?: boolean;
  height?: string;
}

export const QueryEditor: FC<QueryEditorProps> = ({
  value,
  onChange,
  readOnly = false,
  height = '400px',
}) => {
  return (
    <div className="query-editor">
      <CodeMirror
        value={value}
        height={height}
        extensions={[javascript()]} // Using JavaScript mode (closest to SPARQL)
        onChange={onChange}
        editable={!readOnly}
        theme="light"
        basicSetup={{
          lineNumbers: true,
          highlightActiveLineGutter: true,
          highlightSpecialChars: true,
          foldGutter: true,
          drawSelection: true,
          dropCursor: true,
          allowMultipleSelections: true,
          indentOnInput: true,
          syntaxHighlighting: true,
          bracketMatching: true,
          closeBrackets: true,
          autocompletion: true,
          rectangularSelection: true,
          crosshairCursor: true,
          highlightActiveLine: true,
          highlightSelectionMatches: true,
          closeBracketsKeymap: true,
          searchKeymap: true,
          foldKeymap: true,
          completionKeymap: true,
          lintKeymap: true,
        }}
      />
    </div>
  );
};