import { Box, Flex, Kbd, Text } from '@tidbcloud/uikit'
import { useOs } from '@tidbcloud/uikit/hooks'
import { IconRunFill } from '@tidbcloud/uikit/icons'

export const EmptyContainer = ({ children }: { children: React.ReactNode }) => {
  return (
    <Box sx={{ whiteSpace: 'nowrap' }}>
      <Flex wrap="wrap" align="center" mt={12}>
        {children}
      </Flex>
    </Box>
  )
}

export const EmptyRunTips = () => {
  const os = useOs()
  const isMac = os === 'macos' || os === 'ios'

  return (
    <>
      <Box>
        <Text span>Click</Text>
        <Kbd mx={4}>
          <Box component={IconRunFill} size={14} sx={{ verticalAlign: 'middle' }} mr={4}></Box>
          Run
        </Kbd>
        <Text span>or press</Text>
        <Kbd mx={4}>{isMac ? '⌘' : 'Ctrl'}</Kbd>+<Kbd mx={4}>Enter</Kbd>
        <Text span>to run selected SQL statements or the one where your cursor is placed.</Text>
      </Box>

      <Box my={12}>
        Press
        {isMac ? (
          <>
            <Kbd mx={4}>⇧</Kbd>+<Kbd mx={4}>⌘</Kbd>
          </>
        ) : (
          <>
            <Kbd mx={4}>Shift</Kbd>+<Kbd mx={4}>Ctrl</Kbd>
          </>
        )}
        +<Kbd mx={4}>Enter</Kbd>
        <Text span>to run all statements at once.</Text>
      </Box>
    </>
  )
}

const EmptyTips = () => {
  return (
    <Box
      p={16}
      sx={(theme) => ({
        color: theme.colors.carbon[7],
        fontSize: 14
      })}
    >
      <EmptyRunTips />
      <Box>
        Type "-- your question" + <Kbd mx={4}>Enter</Kbd>to try out AI-generated SQL queries.
      </Box>
    </Box>
  )
}

export default EmptyTips