import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
import BlankState from '../primitive/blank_state_primitive'

interface ConversationsBlankStateProps {
  isFilterApplied: boolean
  canCreateConversations: boolean
}

export function ConversationsBlankState({
  isFilterApplied,
  canCreateConversations,
}: ConversationsBlankStateProps) {
  const filterDropdownEnabled = useFilterDropdownEnabled()
  const clearFilters = useClearConversationFilters()

  if (filterDropdownEnabled && isFilterApplied) {
    return (
      <View style={styles.container}>
        <BlankState.Root>
          <BlankState.Imagery name="general.outlinedTextMessage" />
          <BlankState.Content>
            <BlankState.Heading>No matches</BlankState.Heading>
          </BlankState.Content>
          <BlankState.TextButton onPress={clearFilters}>
            View all conversations
          </BlankState.TextButton>
        </BlankState.Root>
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <BlankState.Root>
        <BlankState.Imagery name="general.outlinedTextMessage" />
        <BlankState.Content>
          <BlankState.Heading>No conversations yet.</BlankState.Heading>
          {isFilterApplied ? (
            <BlankState.Text>Adjust your filters to find conversations.</BlankState.Text>
          ) : canCreateConversations ? (
            <BlankState.Text>Tap the compose button to get started.</BlankState.Text>
          ) : (
            <BlankState.Text>
              When your groups or teams start chatting, you&rsquo;ll find them here.
            </BlankState.Text>
          )}
        </BlankState.Content>
      </BlankState.Root>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 32,
  },
})