import {
  Card,
  Divider,
  Group,
  Stack,
  Badge,
  Tooltip,
  Typography,
  Box,
  BoxProps,
  TypographyProps
} from '@tidbcloud/uikit'
import { IconCheck } from '@tidbcloud/uikit/icons'

import { eventTracking } from 'dbaas/utils/tracking'

interface SubtitleProps extends TypographyProps {
  wrapperRef?: React.RefObject<HTMLDivElement>
  /**
   * minHeight for outer container
   */
  wrapperMih?: BoxProps['mih']
}

interface TitleProps extends BoxProps {
  label: string
  badge?: string
  description: string
  disabled?: boolean
  labelProps?: TypographyProps
  descriptionProps?: SubtitleProps
}

const Title = ({ label, badge, description, disabled, labelProps, descriptionProps, ...restProps }: TitleProps) => {
  const { wrapperRef: descWrapperRef, wrapperMih: descWrapperMih, ...restDescProps } = descriptionProps || {}

  return (
    <Box {...restProps} mb={16}>
      <Group gap={8} mb={4}>
        <Typography variant="headline-sm" {...labelProps} c={disabled ? 'carbon.7' : labelProps?.c}>
          {label}
        </Typography>
        {badge && (
          <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
            {badge}
          </Badge>
        )}
      </Group>
      <Box mih={descWrapperMih}>
        <Typography variant="body-lg" c="carbon.7" ref={descWrapperRef} {...restDescProps}>
          {description}
        </Typography>
      </Box>
    </Box>
  )
}

interface DescProps {
  disabled?: boolean
}

const Desc = ({ disabled, children }: React.PropsWithChildren<DescProps>) => {
  return (
    <Group gap={8} align="flex-start">
      <Box component={IconCheck} c={disabled ? 'carbon.6' : 'green.7'} width={16} height={20}></Box>
      <Typography variant="body-lg" c={disabled ? 'carbon.6' : 'carbon.7'} sx={{ flex: 1 }}>
        {children}
      </Typography>
    </Group>
  )
}

interface TierBtnProps extends BoxProps {
  title: string
  subtitle: string
  descriptions: React.ReactNode[]
  badge?: string
  active?: boolean
  disabled?: boolean
  disabledTooltip?: string
  titleProps?: TypographyProps
  subtitleProps?: SubtitleProps
  onClick?: () => void
}

const TierBtn = ({
  title,
  subtitle,
  descriptions,
  badge,
  active,
  disabled,
  disabledTooltip,
  onClick,
  titleProps,
  subtitleProps,
  ...restProps
}: TierBtnProps) => {
  const handleClick = () => {
    if (active || disabled) {
      return
    }

    onClick?.()

    eventTracking('CreateClusterPlan_Select_ButtonClicked', {
      servicePlan: title,
      source: 'TierBtn'
    })
  }

  const btn = (
    <Card
      {...restProps}
      withBorder
      px="sm"
      py="md"
      sx={(theme) => {
        const diffStyles = {
          normal: {
            static: {},
            hover: {
              cursor: 'pointer',
              backgroundColor: theme.colors.carbon[2]
            }
          },
          active: {
            static: {
              borderColor: theme.colors.carbon[9]
            },
            hover: {
              cursor: 'pointer'
            }
          },
          disabled: {
            static: {},
            hover: {
              cursor: 'not-allowed'
            }
          }
        }
        const status =
          [
            {
              status: 'disabled',
              matched: disabled
            },
            {
              status: 'active',
              matched: active
            },
            {
              status: 'normal',
              matched: !disabled && !active
            }
          ].find((match) => match.matched)?.status || 'normal'
        const styles = diffStyles[status]

        return {
          ...styles.static,
          '&:hover': styles.hover
        }
      }}
      onClick={handleClick}
    >
      <Title
        label={title}
        badge={badge}
        description={subtitle}
        disabled={disabled}
        labelProps={titleProps}
        descriptionProps={subtitleProps}
      />
      <Divider color="carbon.4" mx="-sm" />
      {descriptions && (
        <Stack justify="flex-start" gap={8} mt={16}>
          {descriptions.map((desc, index) => (
            <Desc key={index} disabled={disabled}>
              {desc}
            </Desc>
          ))}
        </Stack>
      )}
    </Card>
  )

  return disabled && disabledTooltip ? (
    <Tooltip label={disabledTooltip} radius="md" multiline w={300} withArrow>
      {btn}
    </Tooltip>
  ) : (
    btn
  )
}

export default TierBtn