import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
import React, { useCallback } from 'react'
import { StyleSheet, View } from 'react-native'
import { Badge } from '../../../components'
import { useApiGet } from '../../../hooks/use_api'
import { GroupResource } from '../../../types/resources/group_resource'
import { ConversationsScreenProps } from '../conversations_screen'

export const ChatGroupBadge = ({ rowPaddingHorizontal }: { rowPaddingHorizontal: number }) => {
  const styles = useStyles({ rowPaddingHorizontal })
  const navigation = useNavigation()
  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
  const { chat_group_graph_id } = route.params || {}
  const { data: group } = useApiGet<GroupResource>(
    { url: `/me/groups/${chat_group_graph_id}`, data: { fields: { Group: [] } }, app: 'chat' },
    { enabled: !!chat_group_graph_id }
  )

  const handleBadgePress = useCallback(() => {
    navigation.setParams({
      title: undefined,
      chat_group_graph_id: undefined,
      group_source_app_name: undefined,
    })
  }, [navigation])

  if (!group) return null

  return (
    <View style={styles.row}>
      <Badge iconNameRight="general.x" label={group?.name || ''} onPress={handleBadgePress} />
    </View>
  )
}

const useStyles = ({ rowPaddingHorizontal }: { rowPaddingHorizontal: number }) => {
  return StyleSheet.create({
    row: {
      flexDirection: 'row',
      paddingHorizontal: rowPaddingHorizontal,
    },
  })
}