import { memo } from 'react'

import Badge from '../badge'
import type { BadgeProps } from '../badge/badge.types'
import Box from '../box'
import type { IconProp } from '../icon'
import Icon from '../icon'
import T from '../t'

export interface SidemenuItemContentProps {
  icon?: IconProp
  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  title?: string
  isMenuExpanded?: boolean
  isInPopover?: boolean
  badge?: Pick<BadgeProps, 'text' | 'variant'>
  badgeLinkUrl?: string
}

const SidemenuItemContent = memo<SidemenuItemContentProps>(
  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {
    const iconBaseMarginLeft = 13 / 8
    const iconMarginRight = isMenuExpanded ? 10 / 8 : 20 / 8

    if (isInPopover)
      return (
        <>
          <T isTruncated size="sm" display="inline-block" fontWeight="500" ml={iconBaseMarginLeft}>
            {title}
          </T>
          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
            <Badge
              {...badge}
              data-link={btoa(badgeLinkUrl ?? '#')}
              variant={badge.variant ?? 'subtleGreen'}
              size="sm"
              minW="32px"
              fontSize="12px"
              lineHeight="16px"
              ml="10px"
              mr="10px"
            />
          )}
        </>
      )

    return (
      <>
        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w="20px" transition="margin 0.2s ease-in-out">
          {icon && <Icon name={icon} size={iconSize} />}
        </Box>
        <T isTruncated size="sm" display="inline-block">
          {title}
        </T>
        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
          <Badge
            {...badge}
            data-link={btoa(badgeLinkUrl ?? '#')}
            variant={badge.variant ?? 'subtleGreen'}
            size="sm"
            minW="32px"
            fontSize="12px"
            lineHeight="16px"
            ml="10px"
            mr="10px"
          />
        )}
      </>
    )
  },
)

SidemenuItemContent.displayName = 'SidemenuItemContent'

export default SidemenuItemContent
