import { useNavigation } from '@react-navigation/native'
import React, { useMemo } from 'react'
import { FlatList, StyleSheet, View } from 'react-native'
import { useConversationsContext } from '../../contexts/conversations_context'
import { useTheme } from '../../hooks'
import { useCanCreateConversations } from '../../hooks/use_chat_permissions'
import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
import { useConversationsJoltEvents } from '../../hooks/use_conversations_jolt_events'
import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
import { ConversationResource } from '../../types'
import { ArchivedResultsFooter } from './archived_results_footer'
import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
import { ConversationsBlankState } from './conversations_blank_state'
import { FilteredResultsFooter } from './filtered_results_footer'

interface ConversationsProps {
  ListHeaderComponent?:
    | React.ComponentType<any>
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | null
    | undefined
}

export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
  const styles = useStyles()
  const {
    conversations,
    isLoading,
    fetchNextPage,
    refetch,
    isRefetching,
    isFetched,
    hasNextPage,
    args: { chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived },
  } = useConversationsContext()
  const navigation = useNavigation()
  const canCreateConversations = useCanCreateConversations()
  const clearFilters = useClearConversationFilters()
  const filterDropdownEnabled = useFilterDropdownEnabled()
  const isFilterApplied =
    !!chat_group_graph_id || !!group_source_app_name || !!show_direct_messages || !!show_archived
  const showArchivedResultsFooter = !!show_archived && !isLoading && !hasNextPage
  const showFilteredResultsFooter =
    filterDropdownEnabled &&
    isFilterApplied &&
    !show_archived &&
    !hasNextPage &&
    !isLoading &&
    conversations.length > 0

  const showBadges = !chat_group_graph_id

  const data: FlatListItem[] = useMemo(() => {
    if (isLoading) {
      return loadingPlaceholder
    }
    return conversations.map(conversation => ({
      type: 'conversation' as const,
      id: conversation.id,
      resource: conversation,
    }))
  }, [conversations, isLoading])

  useConversationsJoltEvents()

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={item => item.id.toString()}
        contentContainerStyle={styles.contentContainer}
        onRefresh={refetch}
        refreshing={!isFetched && isRefetching}
        ListHeaderComponent={ListHeaderComponent}
        ListEmptyComponent={
          <ConversationsBlankState
            isFilterApplied={isFilterApplied}
            canCreateConversations={canCreateConversations}
          />
        }
        ListFooterComponent={
          showArchivedResultsFooter ? (
            <ArchivedResultsFooter onViewActiveConversations={clearFilters} />
          ) : showFilteredResultsFooter ? (
            <FilteredResultsFooter />
          ) : null
        }
        renderItem={({ item }) => {
          if (item.type === 'loading') {
            return <ConversationPreviewSkeleton />
          } else {
            return (
              <ConversationPreview
                conversation={item.resource}
                onPress={() =>
                  navigation.navigate('Conversation', {
                    conversation_id: item.resource.id,
                    title: item.resource.title ?? undefined,
                    badge: item.resource.badges?.[0],
                    deleted: item.resource.deleted,
                    muted: item.resource.muted,
                  })
                }
                showBadges={showBadges}
              />
            )
          }
        }}
        onEndReached={() => fetchNextPage()}
      />
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    container: { flex: 1 },
    contentContainer: { paddingVertical: 16 },
    listItem: { color: colors.fillColorNeutral020 },
  })
}

interface FlatListLoadingItem {
  type: 'loading'
  id: string
}
interface FlatListConversationItem {
  type: 'conversation'
  resource: ConversationResource
  id: number
}
type FlatListItem = FlatListLoadingItem | FlatListConversationItem

const loadingPlaceholder: FlatListItem[] = Array.from({ length: 5 }, (_, i) => ({
  type: 'loading',
  id: `loading${i}`,
}))