import Editor, { EditorProps, OnMount } from '@monaco-editor/react'
import { merge, noop } from 'lodash'
import { editor } from 'monaco-editor'
import { useRef } from 'react'
import { cn } from 'ui'

import { timeout } from 'lib/helpers'
import { Loading } from '../Loading'
import { alignEditor } from './CodeEditor.utils'

interface CodeEditorProps {
  id: string
  language: 'pgsql' | 'json' | 'html' | undefined
  autofocus?: boolean
  defaultValue?: string
  isReadOnly?: boolean
  onInputChange?: (value?: string) => void
  onInputRun?: (value: string) => void
  hideLineNumbers?: boolean
  className?: string
  loading?: boolean
  options?: EditorProps['options']
  value?: string
}

const CodeEditor = ({
  id,
  language,
  defaultValue,
  autofocus = true,
  isReadOnly = false,
  hideLineNumbers = false,
  onInputChange = noop,
  onInputRun = noop,
  className,
  loading,
  options,
  value,
}: CodeEditorProps) => {
  const editorRef = useRef<editor.IStandaloneCodeEditor>()

  const onMount: OnMount = async (editor, monaco) => {
    editorRef.current = editor
    alignEditor(editor)

    editor.addAction({
      id: 'supabase',
      label: 'Run Query',
      keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
      contextMenuGroupId: 'operation',
      contextMenuOrder: 0,
      run: async () => {
        const selectedValue = (editorRef?.current as any)
          .getModel()
          .getValueInRange((editorRef?.current as any)?.getSelection())
        onInputRun(selectedValue || (editorRef?.current as any)?.getValue())
      },
    })

    await timeout(500)
    if (autofocus) editor?.focus()
  }

  const optionsMerged = merge(
    {
      tabSize: 2,
      fontSize: 13,
      readOnly: isReadOnly,
      minimap: { enabled: false },
      wordWrap: 'on',
      fixedOverflowWidgets: true,
      contextmenu: true,
      lineNumbers: hideLineNumbers ? 'off' : undefined,
      glyphMargin: hideLineNumbers ? false : undefined,
      lineNumbersMinChars: hideLineNumbers ? 0 : undefined,
      folding: hideLineNumbers ? false : undefined,
    },
    options
  )

  merge({ cpp: '12' }, { java: '23' }, { python: '35' })

  return (
    <Editor
      path={id}
      theme="supabase"
      className={cn(className, 'monaco-editor')}
      value={value ?? undefined}
      language={language}
      defaultValue={defaultValue ?? undefined}
      loading={loading || <Loading />}
      options={optionsMerged}
      onMount={onMount}
      onChange={onInputChange}
    />
  )
}

export default CodeEditor