import React, { useEffect, useRef } from 'react';
import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor';
import type * as monacoTypes from 'monaco-editor';
import { installAutoHeightLayout } from '../shared/autoHeightLayout';
import { language, languageConfiguration } from './sql';
import { formatSql } from './format';

interface SqlPreviewProps {
  className?: string;
  value?: string;
  theme?: 'light' | 'dark';
  fontSize?: number;
  /** Whether to auto-format the SQL before displaying. Default: true */
  enableFormat?: boolean;
}

const SQL_LANG_ID = 'sql';

const themeMap: Record<string, string> = {
  light: 'sql-preview-light',
  dark: 'sql-preview-dark',
};

const transparentColors: monaco.editor.IStandaloneThemeData['colors'] = {
  'editor.background': '#00000000',
  'editorCursor.foreground': '#00000000',
  'editor.lineHighlightBackground': '#00000000',
  'editorLineNumber.foreground': '#28191900',
  focusBorder: '#00000000',
};

const SqlPreview: React.FC<SqlPreviewProps> = (props) => {
  const { className, value = '', theme = 'light', fontSize, enableFormat = true } = props;

  const containerRef = useRef<HTMLDivElement>(null);

  // Format the SQL if formatting is enabled
  const displayValue = enableFormat ? formatSql(value) : value;

  useEffect(() => {
    // Register language if not already registered
    if (!monaco.languages.getLanguages().some((lang) => lang.id === SQL_LANG_ID)) {
      monaco.languages.register({ id: SQL_LANG_ID });
      monaco.languages.setMonarchTokensProvider(SQL_LANG_ID, language as any);
      monaco.languages.setLanguageConfiguration(SQL_LANG_ID, languageConfiguration);
    }
  }, []);

  const handleEditorMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
    monaco.editor.defineTheme('sql-preview-light', { base: 'vs', inherit: true, rules: [], colors: transparentColors });
    monaco.editor.defineTheme('sql-preview-dark', { base: 'vs-dark', inherit: true, rules: [], colors: transparentColors });

    if (containerRef.current) {
      installAutoHeightLayout(editor, containerRef.current, { heightStyleProperty: 'minHeight' });
    }
  };

  return (
    <div
      className={className}
      style={{
        display: 'block',
        position: 'relative',
      }}
    >
      <div
        ref={containerRef}
        style={{
          height: '100%',
        }}
      >
        <MonacoEditor
          width='100%'
          height='100%'
          language={SQL_LANG_ID}
          theme={themeMap[theme] ?? 'sql-preview-light'}
          value={displayValue}
          editorDidMount={handleEditorMount}
          options={{
            editContext: false,
            minimap: { enabled: false },
            readOnly: true,
            scrollBeyondLastLine: false,
            smoothScrolling: true,
            fontSize,
            tabSize: 2,
            wordWrap: 'on',
            fixedOverflowWidgets: true,
            glyphMargin: false,
            lineNumbers: 'off',
            lineNumbersMinChars: 0,
            folding: false,
            lineDecorationsWidth: 0,
            overviewRulerBorder: false,
            overviewRulerLanes: 0,
            renderLineHighlight: 'none',
            occurrencesHighlight: 'off',
            cursorStyle: 'line',
            cursorWidth: 0,
            hideCursorInOverviewRuler: true,
            scrollbar: { vertical: 'hidden', horizontal: 'hidden', alwaysConsumeMouseWheel: false },
            contextmenu: false,
            selectionHighlight: false,
            hover: { enabled: false },
            links: false,
          }}
        />
      </div>
    </div>
  );
};

export default SqlPreview;
export type { SqlPreviewProps };