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

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

  return (
    <>
      <Box>
        Click
        <Kbd mx={4}>
          <Box component={IconRunFill} size={12} sx={{ verticalAlign: 'middle' }} mr={4}></Box>
          Run
        </Kbd>
        or press
        <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={16}>
        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 = () => {
  const os = useOs()
  const isMac = os === 'macos' || os === 'ios'

  return (
    <Box
      p={16}
      sx={(theme) => ({
        color: theme.colors.carbon[7],
        fontSize: 14
      })}
    >
      <EmptyRunTips />
      <Box>
        Press <Kbd mx={4}>{isMac ? '⌘' : 'Ctrl'}</Kbd>+ <Kbd mx={4}>I</Kbd>
        <Text span>to try out AI-generated SQL queries or SQL rewrite using Chat2Query.</Text>
      </Box>
    </Box>
  )
}

export default EmptyTips