import React, { useMemo } from 'react'

// This usage will generate tons of files about languages highlight when esbuild splitting enable
// See https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/async-languages/hljs.js to understand why
// import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql'
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light'
import darkTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
import lightTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light'

import formatSql from '~/utils/sql-formatter'

import Pre from './Pre'

SyntaxHighlighter.registerLanguage('sql', sql)

interface Props {
  sql: string
  compact?: boolean
  theme?: 'dark' | 'light'
}

function simpleSqlMinify(str: string) {
  return str
    .replace(/\s{1,}/g, ' ')
    .replace(/\{\s{1,}/g, '{')
    .replace(/\}\s{1,}/g, '}')
    .replace(/;\s{1,}/g, ';')
    .replace(/\/\*\s{1,}/g, '/*')
    .replace(/\*\/\s{1,}/g, '*/')
}

function HighlightSQL({ sql, compact, theme = 'light' }: Props) {
  const formattedSql = useMemo(() => {
    let f = formatSql(sql)
    if (compact) {
      f = simpleSqlMinify(f)
    }
    return f
  }, [sql, compact])

  return (
    <SyntaxHighlighter
      language='sql'
      style={theme === 'light' ? lightTheme : darkTheme}
      customStyle={{
        background: 'none',
        padding: 0,
        overflowX: 'hidden',
        textOverflow: 'ellipsis'
      }}
      PreTag={Pre}
      data-e2e={`syntax_highlighter_${compact ? 'compact' : 'original'}`}
    >
      {formattedSql}
    </SyntaxHighlighter>
  )
}

export default React.memo(HighlightSQL)