import { ActionIcon, Card, Divider, Flex, Grid, Typography } from '@tidbcloud/uikit'
import { useHover } from '@tidbcloud/uikit/hooks'
import { IconLifeBuoy, IconRocket02 } from '@tidbcloud/uikit/icons'
import { Fragment } from 'react/jsx-runtime'
import { useHistory } from 'react-router-dom'

import { useAccessCheck } from 'dbaas/contexts/access-control'
import { CloudProviderConst } from 'dbaas/features/Project'
import { isTiDBReady, SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { eventTracking } from 'dbaas/utils/tracking'

interface ActionItemProps {
  title: string
  color: string
  icon: React.ReactNode
  description: string
  disabled?: boolean
  onClick?: () => void
}

const ActionItem = (item: ActionItemProps) => {
  const { hovered, ref } = useHover()
  return (
    <Flex
      gap="md"
      align="center"
      onClick={() => {
        if (item.disabled) {
          return
        }
        item.onClick?.()
      }}
      sx={{ cursor: item.disabled ? 'not-allowed' : 'pointer' }}
      ref={ref}
    >
      <ActionIcon
        aria-label={item.title}
        variant="light"
        size={44}
        disabled={item.disabled}
        color={item.color}
        sx={(theme) => ({
          backgroundColor: hovered ? theme.colors[item.color]?.[4] || undefined : undefined,
          '&[data-disabled]': {
            color: item.disabled ? theme.colors.carbon[6] : undefined
          }
        })}
      >
        {item.icon}
      </ActionIcon>
      <div>
        <Typography variant="title-lg" c={item.disabled ? 'carbon.6' : undefined}>
          {item.title}
        </Typography>
        <Typography variant="body-lg" c={item.disabled ? 'carbon.6' : 'carbon.7'}>
          {item.description}
        </Typography>
      </div>
    </Flex>
  )
}

interface TiDBOnboaringProps {
  tidb: SharedTiDB
  openConnect: () => void
}

export const TiDBOnboaring = ({ tidb, openConnect }: TiDBOnboaringProps) => {
  const history = useHistory()

  const ready = isTiDBReady(tidb)
  const importAccessible = useAccessCheck('TidbxImportAction')

  const items: ActionItemProps[] = [
    {
      icon: <IconRocket02 size={20} />,
      title: 'Connect to your app',
      description: 'Enjoy immediate productivity in minutes',
      color: 'green',
      disabled: !ready,
      onClick() {
        eventTracking('Connect to your app Clicked', { from: 'overview' })
        openConnect()
      }
    },
    {
      icon: <IconLifeBuoy size={20} />,
      title: 'Import your own data',
      description:
        tidb.cloudProvider === CloudProviderConst.ALICLOUD
          ? 'Import from Alibaba Cloud OSS and CLI'
          : 'Import from Amazon S3 and CLI',
      color: 'violet',
      disabled: !ready || !importAccessible,
      onClick() {
        eventTracking('Import your own data Clicked', { from: 'overview' })
        history.push(`/tidbs/${tidb.tidbId}/imports`)
      }
    }
  ]
  const visibleItems = tidb.computed.isCassandra ? items.filter((item) => item.title !== 'Import your own data') : items

  return (
    <Card p="xl">
      <Grid grow>
        {visibleItems.map((item, index) => {
          return (
            <Fragment key={item.title}>
              <Grid.Col span={4} key={item.title} sx={{ display: 'flex', gap: 24 }}>
                {index !== 0 && <Divider orientation="vertical" h="100%" />}
                <ActionItem {...item} />
              </Grid.Col>
            </Fragment>
          )
        })}
      </Grid>
    </Card>
  )
}