import { ParamListBase, useNavigation } from '@react-navigation/native'
import {
  NativeStackNavigationOptions,
  NativeStackScreenProps,
} from '@react-navigation/native-stack'
import React, { useRef, useState } from 'react'
import { Keyboard, ScrollView, StyleSheet, View } from 'react-native'
import { KeyboardView } from '../../components'
import {
  composeOptions,
  withMinimalBack,
} from '../../components/display/platform_modal_header_buttons'
import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
import { analyticsEvents, useProductAnalytics } from '../../hooks/use_product_analytics'
import type { SearchResultResource } from '../../types/resources/search_result'
import { SearchPromptBlankState } from './components/search_blank_states'
import { SearchField } from './components/search_field'
import { SearchResultsList, type SearchResultCounts } from './components/search_results_list'

export const SearchScreenOptions = ({
  navigation,
}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>
  composeOptions(
    { title: 'Search', animation: 'fade' },
    withMinimalBack({ onPress: () => navigation.goBack() })
  )

export function SearchScreen() {
  const navigation = useNavigation()
  const [term, setTerm] = useState('')
  const debouncedTerm = useDebouncedSearchTerm(term)
  const { publishEvent } = useProductAnalytics()
  const publishedTerms = useRef(new Set<string>())

  const publishSearch = (settledTerm: string, counts: SearchResultCounts) => {
    if (publishedTerms.current.has(settledTerm)) return

    publishedTerms.current.add(settledTerm)
    publishEvent(analyticsEvents.search_performed, {
      term_length: settledTerm.length,
      conversation_result_count: counts.conversationResultCount,
      message_result_count: counts.messageResultCount,
    })
  }

  const openResult = (result: SearchResultResource, position: number) => {
    Keyboard.dismiss()
    publishEvent(analyticsEvents.search_result_opened, { result_type: result.type, position })

    if (result.type === 'conversation') {
      navigation.navigate('Conversation', {
        conversation_id: Number(result.id),
        title: result.title,
      })
    } else {
      navigation.navigate('Conversation', {
        conversation_id: result.extra.conversationId,
        initial_message_id: result.id,
        title: result.title,
      })
    }
  }

  return (
    <KeyboardView>
      <View style={styles.container} testID="search-screen">
        <SearchField term={term} onChange={setTerm} />
        {debouncedTerm.length > 0 ? (
          <SearchResultsList
            key={debouncedTerm}
            term={debouncedTerm}
            onSelect={openResult}
            onSettled={publishSearch}
          />
        ) : (
          <ScrollView contentContainerStyle={styles.prompt} keyboardShouldPersistTaps="handled">
            <SearchPromptBlankState />
          </ScrollView>
        )}
      </View>
    </KeyboardView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  prompt: {
    flexGrow: 1,
    justifyContent: 'center',
  },
})