import React, { useEffect } from 'react'
import { StyleSheet, View, ViewStyle } from 'react-native'
import {
  ConversationsContextProvider,
  useConversationsContext,
} from '../contexts/conversations_context'
import { useTheme } from '../hooks'
import { ConversationRequestArgs } from '../utils/request/conversation'
import { ConversationPreview } from './conversations/conversation_preview'
import { Icon, Text } from './display'

interface GroupConversationsProps extends Partial<ConversationRequestArgs> {
  limit?: number
  onConversationPress: (conversation: any) => void
  style?: ViewStyle
  onConversationsLoad?: ({ hasConversations }: { hasConversations: boolean }) => void
  ListHeaderComponent?:
    | React.ComponentType<any>
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
  ListOverflowFooterComponent?:
    | React.ComponentType<any>
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
  ListEmptyFooterComponent?:
    | React.ComponentType<any>
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
}

/**
 * GroupConversations is a component that displays a list of conversations
 * for a specific group.
 *
 * Originally designed for use in CCA.
 */
export const GroupConversations = ({ chat_group_graph_id, ...rest }: GroupConversationsProps) => {
  return (
    <ConversationsContextProvider args={{ chat_group_graph_id, group_source_app_name: undefined }}>
      <GroupConversationList {...rest} />
    </ConversationsContextProvider>
  )
}

const GroupConversationList = ({
  limit,
  onConversationPress,
  style,
  onConversationsLoad,
  ListHeaderComponent,
  ListOverflowFooterComponent,
  ListEmptyFooterComponent,
}: GroupConversationsProps) => {
  const styles = useStyles()
  const { conversations = [], isFetched } = useConversationsContext()

  useEffect(() => {
    if (isFetched) {
      onConversationsLoad?.({ hasConversations: conversations.length > 0 })
    }
  }, [conversations.length, isFetched, onConversationsLoad])

  return (
    <View style={style}>
      <>{ListHeaderComponent}</>
      {isFetched && conversations.length === 0 && (
        <View style={styles.listEmpty}>
          <Icon size={24} name="general.textMessage" style={styles.listEmptyIcon} />
          <Text variant="secondary">No conversations found</Text>
          <>{ListEmptyFooterComponent}</>
        </View>
      )}
      {conversations.slice(0, limit).map(conversation => (
        <ConversationPreview
          style={styles.conversation}
          key={conversation.id}
          showBadges={false}
          conversation={conversation}
          onPress={() => onConversationPress(conversation)}
        />
      ))}
      {conversations.length > (limit || 0) && <>{ListOverflowFooterComponent}</>}
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  return StyleSheet.create({
    constainer: {},
    conversation: {
      borderBottomWidth: 0,
    },
    listItem: { color: colors.fillColorNeutral020 },
    listEmpty: {
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: 16,
      gap: 8,
    },
    listEmptyIcon: {
      color: colors.fillColorNeutral020,
    },
  })
}