import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useFontScale, useTheme } from '../../hooks'
import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils'
import { Text } from '../display'

export const UnreadCountBadge = ({
  count,
  unreadReaction,
  showDot,
}: {
  count: number
  unreadReaction: boolean
  showDot: boolean
}) => {
  const styles = useStyles()
  const displayCount = count > 99 ? '99+' : count
  const isUnread = count > 0 || unreadReaction

  if (!isUnread) return null
  if (showDot || count === 0) return <View style={styles.dot} />

  return (
    <View style={styles.badge}>
      <Text variant="footnote" style={styles.count}>
        {displayCount}
      </Text>
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5
  const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit })
  const size = 10 * fontScale

  return StyleSheet.create({
    badge: {
      alignSelf: 'flex-end',
      backgroundColor: colors.fillColorInteractionDefault,
      paddingVertical: 2,
      paddingHorizontal: 8,
      borderRadius: 24 * fontScale,
    },
    count: {
      fontWeight: platformFontWeightBold,
      color: 'white',
    },
    dot: {
      width: size,
      height: size,
      borderRadius: size,
      backgroundColor: colors.fillColorInteractionDefault,
    },
  })
}