import { StaticScreenProps } from '@react-navigation/native'
import React, { memo } from 'react'
import { 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 { useSuspenseGet } from '../hooks'
import { MemberResource } from '../types'

export const SystemMessagePeopleScreenOptions = getFormSheetScreenOptions({
  sheetAllowedDetents: Platform.select({
    android: [0.5, 0.94],
    default: [0.5, 1],
  }),
  headerTitle: 'People',
})

export type SystemMessagePeopleScreenProps = StaticScreenProps<{
  conversation_id: number
  person_ids: number[]
}>

export function SystemMessagePeopleScreen({ route }: SystemMessagePeopleScreenProps) {
  const { conversation_id, person_ids } = route.params
  const styles = useStyles()

  const { data: members } = useSuspenseGet<MemberResource[]>({
    url: `/me/conversations/${conversation_id}/members`,
    data: {
      fields: {
        Member: ['id', 'name', 'avatar'],
      },
      where: {
        id: person_ids,
      },
      limit: person_ids.length,
    },
  })

  const orderById = Object.fromEntries(person_ids.map((id, i) => [id, i]))
  const sortedMembers = [...members].sort((a, b) => (orderById[a.id] ?? 0) - (orderById[b.id] ?? 0))

  return (
    <FormSheet.Root contentStyle={styles.formSheetContent}>
      <FlatList
        data={sortedMembers}
        contentContainerStyle={styles.contentContainer}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => <Person person={item} />}
      />
    </FormSheet.Root>
  )
}

type PersonProps = Pick<MemberResource, 'id' | 'name' | 'avatar'>

const Person = memo(({ person }: { person: PersonProps }) => {
  const styles = useStyles()

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

const useStyles = () => {
  const { bottom } = useSafeAreaInsets()

  return StyleSheet.create({
    formSheetContent: {
      paddingTop: 16,
    },
    contentContainer: {
      paddingTop: 8,
      paddingBottom: bottom + 24,
    },
    personRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
      paddingVertical: 8,
      paddingHorizontal: 16,
      flex: 1,
    },
    personName: {
      flex: 1,
    },
  })
}