import React, { JSX } from 'react'
import type { TextStyle, ViewProps, ViewStyle } from 'react-native'
import { Pressable, StyleSheet, View } from 'react-native'
import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'
import { useFontScale, useTheme } from '../../hooks'
import { platformFontWeightMedium } from '../../utils'
import { tokens } from '../../vendor/tapestry/tokens'
import { Icon, IconString } from './icon'
import { Text } from './text'
import { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'

// =================================
// ====== Constants ================
// =================================

type VariantUnion = 'default' | 'meta' | 'metaSubtle'

type VariantStyles = Record<
  VariantUnion,
  {
    backgroundColor: string
    paddingHorizontal: number
    paddingVertical: number
    borderWidth: number
    borderRadius: number
    textColor: string
    gap: number
    metaLabelPaddingLeft: number
    fontWeight: TextStyle['fontWeight']
  }
>

type ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'
type ProductIconName = 'Chat' | 'chat'
type ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element

const PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {
  Groups: GroupsLogo,
  groups: GroupsLogo,
  services: ServicesIcon,
  Services: ServicesIcon,
}

// =================================
// ====== Component ================
// =================================

export interface BadgeProps {
  /**
   * Renders the main text.
   */
  label: string
  /**
   * Renders secondary meta text to the right of the label.
   */
  metaLabel?: string
  /**
   * Changes the status color for the badge and icon.
   */
  appearance?: StatusAppearanceUnion
  /**
   * Changes form of the logo to support a meta label and badge
   */
  variant?: VariantUnion
  /**
   * Adds a product logo to the left of the text.
   */
  productLogoName?: ProductLogoName | ProductIconName
  /**
   * Shows an icon of the user choice to the left of the text.
   */
  iconName?: IconString
  /**
   * Shows an icon of the user choice to the right of the text.
   */
  iconNameRight?: IconString
  /**
   * Styles badge wrapper.
   */
  style?: ViewStyle
  /**
   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
   */
  maxFontSizeMultiplier?: number
  /**
   * Callback function when the badge is pressed.
   */
  onPress?: () => void
  /**
   * Specifies the number of lines for the meta label before truncating.
   */
  numberOfLinesMetaLabel?: number
}

export function Badge({
  appearance = 'neutral',
  metaLabel,
  style,
  iconName,
  iconNameRight,
  label,
  productLogoName,
  variant = 'default',
  maxFontSizeMultiplier,
  numberOfLinesMetaLabel = 1,
  onPress,
}: BadgeProps) {
  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
  const { showBadgeProductLogo } = useTheme()

  const isMetaSubtle = variant === 'metaSubtle'
  const hasMetaLabel = Boolean(metaLabel)

  const showLogo = showBadgeProductLogo && productLogoName
  const isChatLogo = productLogoName?.toLowerCase() === 'chat'
  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName as ProductLogoName]
  const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label

  return (
    <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole="button">
      <View style={styles.badge}>
        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}
        {showLogo && isChatLogo && <Icon name="general.textMessage" style={styles.icon} />}
        {iconName && <Icon name={iconName} style={styles.icon} />}
        <Text
          variant="footnote"
          style={styles.label}
          numberOfLines={1}
          maxFontSizeMultiplier={maxFontSizeMultiplier}
        >
          {badgeLabel}
        </Text>
        {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}
      </View>
      {hasMetaLabel && (
        <Text
          variant="footnote"
          style={styles.metaLabel}
          numberOfLines={numberOfLinesMetaLabel}
          maxFontSizeMultiplier={maxFontSizeMultiplier}
        >
          {metaLabel}
        </Text>
      )}
    </BadgeWrapper>
  )
}

const BadgeWrapper = ({
  children,
  onPress,
  accessibilityRole,
  ...restProps
}: ViewProps & Pick<BadgeProps, 'onPress'>) => {
  if (onPress) {
    return (
      <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>
        {children}
      </Pressable>
    )
  }

  return <View {...restProps}>{children}</View>
}

// =================================
// ====== Styles ===================
// =================================

const useStyles = ({
  appearance = 'neutral',
  maxFontSizeMultiplier,
  variant = 'default',
}: Partial<BadgeProps>) => {
  const { colors } = useTheme()
  const fontScale = useFontScale({ maxFontSizeMultiplier })

  const statusColorMap = useStatusColorAppearanceMap()

  const badgeGap = 4 * fontScale
  const badgePaddingHorizontal = 8
  const badgePaddingVertical = 4
  const badgeFontSize = 12

  const variantStylesMap: VariantStyles = {
    default: {
      gap: badgeGap,
      backgroundColor: statusColorMap[appearance].background,
      metaLabelPaddingLeft: badgePaddingHorizontal,
      paddingHorizontal: badgePaddingHorizontal,
      paddingVertical: badgePaddingVertical,
      borderWidth: tokens.borderSizeDefault * fontScale,
      borderRadius: tokens.borderRadiusMd * fontScale,
      textColor: statusColorMap[appearance].text,
      fontWeight: 'normal',
    },
    meta: {
      gap: badgeGap,
      backgroundColor: statusColorMap[appearance].background,
      metaLabelPaddingLeft: badgePaddingHorizontal,
      paddingHorizontal: badgePaddingHorizontal,
      paddingVertical: badgePaddingVertical,
      borderWidth: tokens.borderSizeDefault * fontScale,
      borderRadius: tokens.borderRadiusMd * fontScale,
      textColor: statusColorMap[appearance].text,
      fontWeight: platformFontWeightMedium,
    },
    metaSubtle: {
      gap: badgeGap,
      backgroundColor: 'transparent',
      metaLabelPaddingLeft: badgeGap,
      paddingHorizontal: 0,
      paddingVertical: 0,
      borderWidth: 0,
      borderRadius: 0,
      textColor: colors.textColorDefaultSecondary,
      fontWeight: platformFontWeightMedium,
    },
  }

  return StyleSheet.create({
    badgeWrapper: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignSelf: 'flex-start',
      borderRadius: variantStylesMap[variant].borderRadius,
      borderWidth: variantStylesMap[variant].borderWidth,
      borderColor: statusColorMap[appearance].background,
    },
    badge: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: variantStylesMap[variant].gap,
      paddingVertical: variantStylesMap[variant].paddingVertical,
      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
      backgroundColor: variantStylesMap[variant].backgroundColor,
      borderRadius: variantStylesMap[variant].borderRadius - 2,
    },
    icon: {
      color: statusColorMap[appearance].icon,
      fontSize: badgeFontSize,
    },
    iconRight: {
      color: statusColorMap[appearance].icon,
      fontSize: badgeFontSize - 2,
    },
    logo: {
      fontSize: badgeFontSize * fontScale,
    },
    label: {
      color: variantStylesMap[variant].textColor,
      fontWeight: variantStylesMap[variant].fontWeight,
      fontSize: badgeFontSize,
      flexShrink: 1,
    },
    metaLabel: {
      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
      fontSize: badgeFontSize,
      alignSelf: 'center',
      flexShrink: 1,
      paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
    },
  })
}

// =================================
// ====== Product Logos ============
// =================================

interface ProductLogoProps {
  logoSize: number
}

function GroupsLogo({ logoSize }: ProductLogoProps) {
  return (
    <Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
      <Path
        d="M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z"
        fill="url(#paint0_linear_2632_26363)"
      />
      <Defs>
        <LinearGradient
          id="paint0_linear_2632_26363"
          x1={-5.6338}
          y1={5.6338}
          x2={5.6338}
          y2={16.9014}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#FF962D" />
          <Stop offset={1} stopColor="#FC7638" />
        </LinearGradient>
      </Defs>
    </Svg>
  )
}

function ServicesIcon({ logoSize }: ProductLogoProps) {
  return (
    <Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z"
        fill="url(#paint0_linear_2632_56586)"
      />
      <Defs>
        <LinearGradient
          id="paint0_linear_2632_56586"
          x1={-5.51759}
          y1={5.6338}
          x2={5.75001}
          y2={16.9014}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#6BB23D" />
          <Stop offset={1} stopColor="#659630" />
        </LinearGradient>
      </Defs>
    </Svg>
  )
}