import { Box, Loader, Flex, Typography, ActionIcon } from '@tidbcloud/uikit'
import { IconCheckCircle, IconXCircle, IconInfoCircle } from '@tidbcloud/uikit/icons'
import DOMPurify from 'dompurify'

import { SqlFetchRes } from '../types'

export const RunningTips = () => {
  return (
    <Flex direction="column">
      <Flex align="center">
        <Loader size={20} mr={8} />
        <Typography variant="headline-sm" fw={500} c="carbon.7">
          Query Running
        </Typography>
      </Flex>
      <Typography variant="label-lg" c="carbon.7" mt={8}>
        The execution result is loading
      </Typography>
    </Flex>
  )
}

export const RunSuccTips: React.FC<React.PropsWithChildren<{ message: string | undefined; hideTitle?: boolean }>> = ({
  message = '',
  hideTitle
}) => {
  return (
    <Flex direction="column">
      {!hideTitle && (
        <Flex align="center">
          <ActionIcon c="green.8" variant="transparent" size={20} sx={{ cursor: 'default' }}>
            <IconCheckCircle size={20} strokeWidth={2} />
          </ActionIcon>
          <Typography variant="headline-sm" fw={500} c="green.8" ml={8}>
            Query OK.
          </Typography>
        </Flex>
      )}
      <Typography variant="body-lg" c="carbon.8" my={8}>
        {message}
      </Typography>
    </Flex>
  )
}

export const RunErrTips: React.FC<React.PropsWithChildren<{ message: string | SqlFetchRes | undefined }>> = ({
  message = ''
}) => {
  return (
    <Flex direction="column">
      <Flex align="center">
        <ActionIcon c="red.8" variant="transparent" size={20} sx={{ cursor: 'default' }}>
          <IconXCircle size={20} />
        </ActionIcon>
        <Typography variant="headline-sm" fw={500} c="red.8" ml={8}>
          Query Failed.
        </Typography>
      </Flex>
      <Typography variant="body-lg" c="carbon.8" my={8}>
        {typeof message === 'string' ? <span>{DOMPurify.sanitize(message)}</span> : <>{message as any}</>}
      </Typography>
    </Flex>
  )
}

export const RunWarningTips: React.FC<React.PropsWithChildren<{ message: string[] | undefined }>> = ({
  message = []
}) => {
  return (
    <Flex direction="column">
      <Flex align="center">
        <ActionIcon c="yellow.8" variant="transparent" size={20} sx={{ cursor: 'default' }}>
          <IconInfoCircle size={20} />
        </ActionIcon>
        <Typography variant="headline-sm" fw={500} c="yellow.8" ml={8}>
          Query Warning.
        </Typography>
      </Flex>
      <Box sx={{ textAlign: 'center' }}>
        {(message || []).map((item) => (
          <Typography variant="body-lg" my={8} ta="left" c="carbon.8">
            {item}
          </Typography>
        ))}
      </Box>
    </Flex>
  )
}
export default RunningTips