import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { useEffect } from 'react'
import { DefaultLoading } from '../components/page/loading'
import BlankState from '../components/primitive/blank_state_primitive'
import { useApiClient } from '../hooks'
import { findOrCreateServicesConversation } from '../hooks/services/use_find_or_create_services_conversation'
import { ResponseError } from '../utils/response_error'

export type TeamConversationRouteProps = {
  plan_id?: number
  team_ids?: number[]
}

export type TeamConversationScreenProps = StaticScreenProps<TeamConversationRouteProps>

export const TeamConversationScreen = ({ route }: TeamConversationScreenProps) => {
  const apiClient = useApiClient()
  const queryClient = useQueryClient()
  const navigation = useNavigation()
  const {
    data: conversation,
    isError,
    error,
  } = useQuery({
    queryKey: ['team-conversation', route.params.team_ids, route.params.plan_id],
    queryFn: () =>
      findOrCreateServicesConversation({
        apiClient,
        teamIds: route.params.team_ids ?? [],
        planId: route.params.plan_id,
      }).then(r => r.conversation),
    retry: (failureCount, err) => !(err instanceof ResponseError) && failureCount < 3,
  })

  useEffect(() => {
    if (!conversation?.id) return

    navigation.dispatch(
      StackActions.replace('Conversation', {
        conversation_id: conversation.id,
        title: conversation.title ?? undefined,
      })
    )

    return () => {
      queryClient.removeQueries({ queryKey: ['team-conversation'] })
    }
  }, [conversation?.id, conversation?.title, navigation, queryClient])

  if (isError) return <TeamConversationError error={error} onGoBack={navigation.goBack} />

  return <DefaultLoading />
}

function TeamConversationError({ error, onGoBack }: { error: Error; onGoBack: () => void }) {
  const detail =
    error instanceof ResponseError
      ? error.errors
          .map(e => e.detail)
          .filter(Boolean)
          .join('\n')
      : ''

  return (
    <BlankState.Root>
      <BlankState.Imagery name="people.noTextMessage" />
      <BlankState.Content>
        <BlankState.Heading>Can't start this conversation</BlankState.Heading>
        <BlankState.Text>
          {detail || 'Something went wrong while starting this conversation.'}
        </BlankState.Text>
      </BlankState.Content>
      <BlankState.Button title="Go back" onPress={onGoBack} size="md" accessibilityRole="link" />
    </BlankState.Root>
  )
}