import { ActionIcon, Box, Flex, Group, HoverCard, Kbd, Typography } from '@tidbcloud/uikit'
import { useOs } from '@tidbcloud/uikit/hooks'
import { IconKeyboard02 } from '@tidbcloud/uikit/icons'

const HotKeyItem: React.FC<React.PropsWithChildren<{ title: string; hotkeys: string[] }>> = ({ title, hotkeys }) => {
  return (
    <Group align="center" justify="space-between" mt={16} mb={12}>
      <Typography variant="body-lg">{title}</Typography>
      <Flex align="center">
        {hotkeys.map((hotkey, idx) => (
          <>
            <Box>
              <Kbd key={idx} mx={4}>
                {hotkey}
              </Kbd>
            </Box>
            {idx === hotkeys.length - 1 ? null : '+'}
          </>
        ))}
      </Flex>
    </Group>
  )
}

const HotKeys = () => {
  const os = useOs()
  const isMac = ['macos', 'ios'].includes(os)
  const hotKeyText = isMac ? 'Command' : 'Ctrl'

  return (
    <HoverCard shadow="md" withArrow position="top" width={380}>
      <HoverCard.Target>
        <ActionIcon size="lg" variant="default" mr={8}>
          <IconKeyboard02 size={16} />
        </ActionIcon>
      </HoverCard.Target>
      <HoverCard.Dropdown>
        <HotKeyItem title="Run selected query" hotkeys={[hotKeyText, 'Enter']} />
        <HotKeyItem title="Run all queries" hotkeys={['Shift', hotKeyText, 'Enter']} />
        <HotKeyItem title="Launch the AI Chat2Query dialog" hotkeys={[hotKeyText, 'I']} />
        <HotKeyItem title="Search file" hotkeys={[hotKeyText, 'F']} />
      </HoverCard.Dropdown>
    </HoverCard>
  )
}

export default HotKeys