import React from 'react'
import { FlatList, type FlatListProps, StyleSheet, View } from 'react-native'
import { Person, Text } from '../../../components/display'
import { useTheme } from '../../../hooks'
import { MemberResource } from '../../../types'

interface FormListProps {
  memberData: MemberResource[]
  loadingMore?: boolean
  FormContent?: FlatListProps<MemberResource>['ListHeaderComponent']
  listEmptyText?: string
  onEndReached?: () => void
}

export const FormList = ({
  memberData,
  loadingMore,
  FormContent,
  listEmptyText,
  onEndReached,
}: FormListProps) => {
  const styles = useStyles()

  return (
    <FlatList
      data={memberData}
      ListHeaderComponent={FormContent}
      renderItem={({ item }) => <Person person={item} style={styles.person} />}
      ListFooterComponent={
        loadingMore ? <Text style={styles.loadingMore}>Loading more...</Text> : null
      }
      keyExtractor={item => item.id.toString()}
      ListEmptyComponent={<ListEmptyText text={listEmptyText || 'No members found'} />}
      onEndReached={onEndReached}
    />
  )
}

const ListEmptyText = ({ text }: { text: string }) => {
  const styles = useStyles()

  return (
    <View style={styles.emptyTextContainer}>
      <Text style={styles.emptyText}>{text}</Text>
    </View>
  )
}

export const Divider = () => {
  const styles = useStyles()

  return <View style={styles.divider} />
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    person: {
      paddingHorizontal: 16,
      paddingBottom: 12,
    },
    loadingMore: {
      paddingHorizontal: 16,
      paddingBottom: 12,
    },
    emptyTextContainer: {
      alignItems: 'center',
      justifyContent: 'center',
      padding: 32,
    },
    emptyText: {
      textAlign: 'center',
      color: colors.textColorDefaultSecondary,
    },
    divider: {
      borderBottomWidth: 1,
      borderBottomColor: colors.fillColorNeutral050Base,
    },
  })
}