import { StaticScreenProps, useNavigation } from '@react-navigation/native'
import React, { memo, useCallback, useMemo, useState } from 'react'
import { LayoutChangeEvent, Platform, StyleSheet, View } from 'react-native'
import { FlatList } from 'react-native-gesture-handler'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Avatar, Text } from '../../components'
import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
import { useTheme } from '../../hooks'
import { useReadReceipts } from '../../hooks/use_read_receipts'
import { ReadReceiptResource } from '../../types/resources/read_receipt'

const LIST_BOTTOM_PADDING = 24

export const MessageReadReceiptsScreenOptions = getFormSheetScreenOptions({
  sheetAllowedDetents: Platform.select({
    android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android
    default: [0.5, 1],
  }),
  headerTitle: 'Read receipts',
})

export type MessageReadReceiptsScreenProps = StaticScreenProps<{
  conversation_id: number
  message_id: string
}>

export function MessageReadReceiptsScreen({ route }: MessageReadReceiptsScreenProps) {
  const styles = useStyles()
  const navigation = useNavigation()
  const [formSheetHeaderHeight, setFormSheetHeaderHeight] = useState(0)
  const { bottom } = useSafeAreaInsets()

  const { conversation_id, message_id } = route.params
  const {
    data: receipts,
    totalCount,
    fetchNextPage,
  } = useReadReceipts({ conversation_id, message_id })

  const contentContainerPaddingBottomStyles = useMemo(() => {
    return Platform.select({
      android: { paddingBottom: bottom + LIST_BOTTOM_PADDING },
      default: { paddingBottom: bottom + formSheetHeaderHeight + LIST_BOTTOM_PADDING },
    })
  }, [bottom, formSheetHeaderHeight])

  const handleFormSheetHeaderLayout = useCallback(
    (event: LayoutChangeEvent) => {
      setFormSheetHeaderHeight(event.nativeEvent.layout.height)
    },
    [setFormSheetHeaderHeight]
  )

  return (
    <FormSheet.Root>
      <View onLayout={handleFormSheetHeaderLayout}>
        <FormSheet.Header>
          <FormSheet.HeaderTitle>Read receipts ({totalCount})</FormSheet.HeaderTitle>
          <FormSheet.HeaderActions>
            <FormSheet.HeaderTextButton onPress={() => navigation.goBack()}>
              Close
            </FormSheet.HeaderTextButton>
          </FormSheet.HeaderActions>
        </FormSheet.Header>
      </View>
      <FlatList
        data={receipts}
        contentContainerStyle={[styles.contentContainer, contentContainerPaddingBottomStyles]}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => <Receipt receipt={item} />}
        nestedScrollEnabled
        ListEmptyComponent={<Text style={styles.emptyText}>No one has read this message yet.</Text>}
        onEndReached={() => fetchNextPage()}
        onEndReachedThreshold={0.2}
      />
    </FormSheet.Root>
  )
}

const Receipt = memo(({ receipt }: { receipt: ReadReceiptResource }) => {
  const styles = useStyles()

  return (
    <View style={styles.receiptRow}>
      <Avatar sourceUri={receipt.avatar} size="sm" />
      <Text variant="tertiary" numberOfLines={2} style={styles.name}>
        {receipt.name}
      </Text>
    </View>
  )
})

const useStyles = () => {
  const { colors } = useTheme()
  return StyleSheet.create({
    contentContainer: {
      paddingHorizontal: 16,
      paddingTop: 8,
    },
    receiptRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
      paddingVertical: 8,
      flex: 1,
    },
    name: {
      flex: 1,
    },
    emptyText: {
      textAlign: 'center',
      color: colors.textColorDefaultSecondary,
      marginTop: 32,
      fontSize: 16,
    },
    emptyContainer: {
      flex: 1,
      justifyContent: 'center',
    },
  })
}