import { StaticScreenProps } from '@react-navigation/native'
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Conversations } from '../../components'
import { ConversationsContextProvider } from '../../contexts/conversations_context'
import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
import { useSearchEnabled } from '../../hooks/use_search_enabled'
import { AppName } from '../../types/resources/app_name'
import { GraphId } from '../../types/resources/group_resource'
import { Menu } from '../../utils/native_adapters'
import { FilterDropdownListHeaderComponent } from './components/filter_dropdown_list_header_component'
import { ListHeaderComponent } from './components/list_header_component'
import { SearchListHeaderComponent } from './components/search_list_header_component'

export type ConversationsScreenProps = StaticScreenProps<{
  title?: string
  chat_group_graph_id?: GraphId
  group_source_app_name?: AppName
  show_direct_messages?: boolean
  show_archived?: boolean
}>

export function ConversationsScreen({ route }: ConversationsScreenProps) {
  const styles = useStyles()
  const Header = useListHeaderComponent()

  usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)

  return (
    <View style={styles.container}>
      <ConversationsContextProvider args={route.params} opts={{ throwOnError: true }}>
        <Conversations ListHeaderComponent={Header} />
      </ConversationsContextProvider>
    </View>
  )
}

const useListHeaderComponent = () => {
  const filterDropdownEnabled = useFilterDropdownEnabled()
  const searchEnabled = useSearchEnabled()

  if (filterDropdownEnabled && Menu.isConfigured) return FilterDropdownListHeaderComponent
  if (searchEnabled) return SearchListHeaderComponent

  return ListHeaderComponent
}

const useStyles = () => {
  return StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
    },
  })
}