import React, { useState } from 'react'

import { Button, CopyButton, Divider } from '@mantine/core'
import { IconCheck, IconCopy } from '@tabler/icons-react'
import { Modal, Tooltip, TooltipProps } from 'antd'

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

interface ExpandableSQLProps {
  sql: string
  tooltipPlacement?: TooltipProps['placement']
}

const ExpandableSQL: React.FC<ExpandableSQLProps> = ({
  sql,
  tooltipPlacement = 'right'
}) => {
  const [expanded, setExpanded] = useState(false)
  return (
    <>
      <Tooltip
        overlayClassName='max-w-[500px]'
        placement={tooltipPlacement}
        title={<SQLHighlighter theme='dark' sql={sql} />}
      >
        <div
          className='truncate cursor-pointer'
          onClick={() => setExpanded(true)}
        >
          <SQLHighlighter compact sql={sql} />
        </div>
      </Tooltip>
      <Modal
        width={'60%'}
        visible={expanded}
        footer={null}
        onCancel={() => setExpanded(false)}
      >
        <CopyButton value={formatSql(sql)}>
          {({ copied, copy }) => (
            <Button
              size='xs'
              variant='light'
              leftIcon={
                copied ? <IconCheck size={16} /> : <IconCopy size={16} />
              }
              color={copied ? 'teal' : ''}
              onClick={copy}
            >
              {copied ? 'Copied!' : 'Copy SQL'}
            </Button>
          )}
        </CopyButton>
        <Divider my='sm' />
        <SQLHighlighter sql={sql} />
      </Modal>
    </>
  )
}

export default ExpandableSQL