import { PlatformPressable } from '@react-navigation/elements'
import colorFunction from 'color'
import React, { useMemo } from 'react'
import { StyleSheet } from 'react-native'
import { Text } from '../../components/display'
import { useSelectedChipBackgroundColor, useTheme } from '../../hooks'
import { useCreateAndroidRippleColor } from '../../hooks/use_create_android_ripple_color'
import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'
import { MessageResource } from '../../types'
import { ReactionCountResource } from '../../types/resources/reaction'
import { REACTION_EMOJIS } from '../../utils'
import { Haptic } from '../../utils/native_adapters'

export function MessageReaction({
  reaction,
  onLongPress,
  message,
  conversationId,
  disabled = false,
}: {
  reaction: ReactionCountResource
  onLongPress: (_reaction: ReactionCountResource) => void
  message: MessageResource
  conversationId: number
  disabled?: boolean
}) {
  const styles = useReactionStyles(reaction)
  const { handleReactionToggle } = useMessageReactionToggle({
    conversation_id: conversationId,
    message,
  })

  const { colors } = useTheme()
  const baseRippleColor = reaction.mine ? colors.interaction : colors.fillColorNeutral060
  const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })

  if (!reaction.count) return null
  if (!REACTION_EMOJIS[reaction.value]) return null

  const handlePress = () => {
    Haptic.impactLight()
    handleReactionToggle({ value: reaction.value, mine: !!reaction.mine })
  }

  return (
    <PlatformPressable
      key={reaction.value}
      testID={`reaction-${message.id}-${reaction.value}`}
      style={styles.reaction}
      onLongPress={() => onLongPress(reaction)}
      onPress={disabled ? undefined : handlePress}
      pressOpacity={disabled ? 1 : undefined}
      android_ripple={
        disabled ? undefined : { color: androidRippleColor, borderless: false, foreground: true }
      }
    >
      <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
      <Text style={styles.reactionText}>{reaction.count}</Text>
    </PlatformPressable>
  )
}

export const useReactionStyles = ({ mine }: { mine: number }) => {
  const { colors } = useTheme()
  const activeBorderColor = useMemo(() => {
    return colorFunction(colors.borderColorChipSelected ?? colors.interaction)
      .hsl()
      .lightness(colors.name === 'dark' ? 20 : 80)
      .string()
  }, [colors.borderColorChipSelected, colors.interaction, colors.name])
  const activeBackgroundColor = useSelectedChipBackgroundColor()

  return StyleSheet.create({
    reaction: {
      borderWidth: 1,
      borderColor: mine ? activeBorderColor : 'transparent',
      backgroundColor: mine ? activeBackgroundColor : colors.fillColorNeutral060,
      borderRadius: 16,
      overflow: 'hidden',
      paddingVertical: 4,
      paddingHorizontal: 8,
      flexDirection: 'row',
      alignItems: 'center',
      gap: 2,
    },
    reactionEmoji: { fontSize: 12, paddingTop: 0 },
    reactionText: { fontSize: 12, color: colors.textColorDefaultPrimary },
  })
}