import { useNavigation } from '@react-navigation/native'
import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
import React, { useEffect } from 'react'
import { ScrollView, StyleSheet, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Button, Heading } from '../../components'
import { DefaultLoading } from '../../components/page/loading'
import { useNewConversationEntry } from '../../hooks/use_new_conversation_entry'
import { Haptic } from '../../utils/native_adapters'
import type {
  ConversationSelectRecipientsParams,
  ConversationSelectRecipientsScreenProps,
} from './types/screen_props'

type NewConversationStackParamList = {
  ConversationNewEntry: ConversationSelectRecipientsParams | undefined
  ConversationSelectGroupRecipients: ConversationSelectRecipientsParams | undefined
  ConversationSelectTeamsILeadRecipients: ConversationSelectRecipientsParams | undefined
  ConversationSelectDirectMessageRecipients: ConversationSelectRecipientsParams | undefined
}

export const ConversationNewEntryScreen = ({ route }: ConversationSelectRecipientsScreenProps) => {
  const styles = useStyles()
  const navigation = useNavigation<NativeStackNavigationProp<NewConversationStackParamList>>()
  const entryMode = useNewConversationEntry()

  useEffect(() => {
    if (entryMode === 'groups') {
      navigation.replace('ConversationSelectGroupRecipients', route.params)
      return
    }

    if (entryMode === 'teams') {
      navigation.replace('ConversationSelectTeamsILeadRecipients', route.params)
      return
    }

    if (entryMode === 'direct_message') {
      navigation.replace('ConversationSelectDirectMessageRecipients', route.params)
      return
    }

    if (entryMode === 'none') {
      navigation.goBack()
      return
    }
  }, [entryMode, navigation, route.params])

  if (entryMode !== 'select_type') return <DefaultLoading />

  const handleGroupPress = () => {
    Haptic.impactLight()
    navigation.navigate('ConversationSelectGroupRecipients', route.params)
  }

  const handleTeamPress = () => {
    Haptic.impactLight()
    navigation.navigate('ConversationSelectTeamsILeadRecipients', route.params)
  }

  return (
    <ScrollView contentContainerStyle={styles.contentContainer}>
      <View style={styles.header}>
        <Heading variant="h2">Start a conversation by</Heading>
      </View>
      <View style={styles.actions}>
        <Button
          title="Group"
          onPress={handleGroupPress}
          size="lg"
          variant="outline"
          accessibilityHint="Opens group selection screen"
        />
        <Button
          title="Team"
          onPress={handleTeamPress}
          size="lg"
          variant="outline"
          accessibilityHint="Opens team selection screen"
        />
      </View>
    </ScrollView>
  )
}

const useStyles = () => {
  const { bottom } = useSafeAreaInsets()

  return StyleSheet.create({
    contentContainer: {
      flexGrow: 1,
      padding: 16,
      paddingBottom: 16 + bottom,
      justifyContent: 'center',
    },
    header: {
      marginBottom: 24,
      alignItems: 'center',
    },
    actions: {
      gap: 12,
      flexDirection: 'row',
      justifyContent: 'center',
    },
  })
}