import React, { useEffect, useRef } from 'react'
import { FlatList, StyleSheet, View } from 'react-native'
import { Banner, Spinner, Text, TextButton } from '../../../components'
import { useSearchResults } from '../../../hooks/use_search_results'
import type {
  ConversationSearchResultResource,
  MessageSearchResultResource,
  SearchResultResource,
} from '../../../types/resources/search_result'
import { ConversationResults } from './conversation_results'
import { MessageResultRow } from './message_result_row'
import { ResultsSection } from './results_section'
import { NoResultsBlankState } from './search_blank_states'

const SEARCH_ERROR_MESSAGE = "Couldn't search right now. Try again."

export interface SearchResultCounts {
  conversationResultCount: number
  messageResultCount: number
}

interface SearchResultsListProps {
  term: string
  onSelect: (result: SearchResultResource, position: number) => void
  onSettled: (term: string, counts: SearchResultCounts) => void
}

export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsListProps) {
  const {
    results,
    failedTypes,
    isPending,
    isError,
    isFetchNextPageError,
    loadMore,
    hasNextPage,
    isFetchingNextPage,
  } = useSearchResults(term)
  const conversationResults = results.filter(isConversationResult)
  const messageResults = results.filter(isMessageResult)
  const settled = !isPending && !isError

  const settledTermRef = useRef<string | undefined>(undefined)

  useEffect(() => {
    if (!settled || settledTermRef.current === term) return

    settledTermRef.current = term
    onSettled(term, {
      conversationResultCount: conversationResults.length,
      messageResultCount: messageResults.length,
    })
  }, [settled, term, conversationResults.length, messageResults.length, onSettled])

  return (
    <FlatList
      data={messageResults}
      keyExtractor={item => item.id}
      keyboardShouldPersistTaps="handled"
      keyboardDismissMode="on-drag"
      contentContainerStyle={styles.content}
      renderItem={({ item, index }) => (
        <MessageResultRow result={item} onPress={() => onSelect(item, index)} />
      )}
      ListHeaderComponent={
        <>
          {conversationResults.length > 0 && (
            <ConversationResults results={conversationResults} onSelect={onSelect} />
          )}
          {failedTypes.includes('conversation') && <SectionFailure type="conversation" />}
          {messageResults.length > 0 && <ResultsSection title="Messages" />}
        </>
      }
      ListEmptyComponent={
        <ListEmpty
          term={term}
          isError={isError}
          isPending={isPending}
          noResults={results.length === 0 && failedTypes.length === 0}
        />
      }
      ListFooterComponent={
        <>
          {isFetchingNextPage && (
            <View accessibilityLabel="Loading more results" style={styles.loading}>
              <Spinner />
            </View>
          )}
          {isFetchNextPageError && !isFetchingNextPage && (
            <TextButton onPress={loadMore} style={styles.retry}>
              Try again
            </TextButton>
          )}
          {failedTypes.includes('message') && <SectionFailure type="message" />}
        </>
      }
      onEndReached={() => {
        if (hasNextPage && !isFetchingNextPage && !isFetchNextPageError) loadMore()
      }}
      onEndReachedThreshold={0.5}
    />
  )
}

interface ListEmptyProps {
  term: string
  isError: boolean
  isPending: boolean
  noResults: boolean
}

function ListEmpty({ term, isError, isPending, noResults }: ListEmptyProps) {
  if (isError) {
    return <Banner appearance="error" description={SEARCH_ERROR_MESSAGE} style={styles.banner} />
  }

  if (isPending) {
    return (
      <View accessibilityLabel="Loading results" style={styles.loading}>
        <Spinner />
      </View>
    )
  }

  if (noResults) return <NoResultsBlankState term={term} />

  return null
}

function SectionFailure({ type }: { type: SearchResultResource['type'] }) {
  return (
    <Text accessibilityRole="alert" variant="secondary" style={styles.sectionFailure}>
      Couldn&rsquo;t load {type}s.
    </Text>
  )
}

function isConversationResult(
  result: SearchResultResource
): result is ConversationSearchResultResource {
  return result.type === 'conversation'
}

function isMessageResult(result: SearchResultResource): result is MessageSearchResultResource {
  return result.type === 'message'
}

const styles = StyleSheet.create({
  content: {
    flexGrow: 1,
  },
  banner: {
    margin: 16,
  },
  loading: {
    alignItems: 'center',
    paddingVertical: 16,
  },
  retry: {
    alignSelf: 'center',
    paddingVertical: 16,
  },
  sectionFailure: {
    fontSize: 14,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
})