import {
  ActionIcon,
  Card,
  CardProps,
  CardSectionProps,
  AvatarProps,
  UnstyledButton,
  Flex,
  Group,
  Avatar,
  Box,
  Typography,
  Divider
} from '@tidbcloud/uikit'
import { IconMinus } from '@tidbcloud/uikit/icons'
import React from 'react'

import { useHelpCenterContext } from './context'

export interface HelpCenterCardProps extends CardProps {}

export const HelpCenterCard = ({ children, ...rest }: HelpCenterCardProps) => {
  return <Card {...rest}>{children}</Card>
}

export interface HelpCenterCardHeaderProps extends CardSectionProps {
  withClose?: boolean
  rightSection?: React.ReactNode
}

export const HelpCenterCardHeader: React.FC<React.PropsWithChildren<HelpCenterCardHeaderProps>> = ({
  withClose = true,
  rightSection,
  children,
  ...rest
}) => {
  const { closeDialog } = useHelpCenterContext()
  return (
    <Card.Section
      h={48}
      pl={16}
      pr={10}
      bg="carbon.0"
      sx={() => {
        return {
          display: 'flex',
          alignItems: 'center',
          justifyContent: children ? 'space-between' : 'flex-end'
        }
      }}
      data-first="true"
      {...rest}
    >
      {children}
      {(rightSection || withClose) && (
        <Group gap={0} wrap="nowrap">
          {rightSection}
          {withClose && (
            <ActionIcon
              variant="transparent"
              aria-label="Close Help Center modal"
              c="carbon.8"
              sx={() => {
                return {
                  ':hover': {
                    background: 'transparent'
                  }
                }
              }}
              onClick={closeDialog}
            >
              <IconMinus size={16} />
            </ActionIcon>
          )}
        </Group>
      )}
    </Card.Section>
  )
}

export interface HelpCenterCardContentProps extends CardSectionProps {}

export const HelpCenterCardContent: React.FC<React.PropsWithChildren<HelpCenterCardFooterProps>> = ({
  children,
  ...rest
}) => {
  return (
    <Card.Section
      inheritPadding
      sx={() => {
        return {
          flex: 1,
          overflowY: 'auto'
        }
      }}
      {...rest}
    >
      {children}
    </Card.Section>
  )
}

export interface HelpCenterCardFooterProps extends CardSectionProps {}

export const HelpCenterCardFooter: React.FC<React.PropsWithChildren<HelpCenterCardFooterProps>> = ({
  children,
  sx,
  ...rest
}) => {
  return (
    <>
      <Card.Section data-last="true" px={16} withBorder={true} h={64} {...rest}>
        <Divider mx={-16}></Divider>
        {children}
      </Card.Section>
    </>
  )
}

HelpCenterCard.Header = HelpCenterCardHeader
HelpCenterCard.Content = HelpCenterCardContent
HelpCenterCard.Footer = HelpCenterCardFooter

export interface EntryCardProps {
  title: string | React.ReactNode
  description?: string | React.ReactNode
  avatar?: React.ReactNode
  avatarProps?: AvatarProps
  rightSection?: React.ReactNode
  href?: string
  target?: React.HTMLAttributeAnchorTarget
  onClick?: () => void
  dataTestId?: string
  dataEntry?: string
  dataMpEvent?: string
}

export const EntryCard = ({
  title,
  description,
  avatar,
  avatarProps = {},
  rightSection,
  href,
  target,
  onClick,
  dataTestId,
  dataEntry,
  dataMpEvent
}: EntryCardProps) => {
  return (
    <UnstyledButton
      component={href ? 'a' : 'button'}
      href={href}
      target={target}
      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
      type={href ? undefined : 'button'}
      data-testid={dataTestId}
      data-entry={dataEntry}
      data-mp-event={dataMpEvent}
      onClick={onClick}
      mb={8}
      px={16}
      h={64}
      sx={(theme) => {
        return {
          border: `1px solid ${theme.colors.carbon[3]}`,
          borderRadius: theme.defaultRadius,
          width: '100%',
          display: 'block',
          boxSizing: 'border-box',
          transition: 'border-color 120ms ease',
          ':hover': {
            borderColor: theme.colors.carbon[6],
            textDecoration: 'none'
          }
        }
      }}
    >
      <Flex h="100%" align="center" justify="space-between" gap="md">
        <Flex gap="md" align="center" sx={{ minWidth: 0 }}>
          <Avatar {...avatarProps} size={32} radius={8}>
            {avatar}
          </Avatar>
          <Box>
            <Typography variant="title-lg" component="div" c="carbon.8" fz={16} fw={500}>
              {title}
            </Typography>
            {!!description && (
              <Typography variant="body-lg" component="div" fz={14} c="carbon.7">
                {description}
              </Typography>
            )}
          </Box>
        </Flex>
        {rightSection}
      </Flex>
    </UnstyledButton>
  )
}