import { useNavigation } from '@react-navigation/native'
import { partition } from 'lodash'
import React from 'react'
import { SectionList, StyleSheet, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Heading, Text } from '../../components'
import { useGroupsGroups } from '../../hooks/use_groups_groups'
import { GroupsGroupResource } from '../../types'
import { GroupsRecipientRow } from './components/groups_recipient_row'
import { RestrictedGroupRow } from './components/restricted_group_row'
import { ConversationSelectRecipientsScreenProps } from './types/screen_props'

const SectionKey = {
  my: 'my',
  more: 'more',
} as const

const SECTION_CONFIG = {
  [SectionKey.my]: {
    title: 'My groups',
    subtitle: null,
    ListItemComponent: GroupsRecipientRow,
  },
  [SectionKey.more]: {
    title: 'More groups',
    subtitle: 'You can not start a new conversation in these groups',
    ListItemComponent: RestrictedGroupRow,
  },
}

interface GroupsSection {
  key: keyof typeof SectionKey
  data: GroupsGroupResource[]
}

export const ConversationSelectGroupRecipientsScreen = ({
  route,
}: ConversationSelectRecipientsScreenProps) => {
  const styles = useStyles()
  const navigation = useNavigation()
  const { data: groups = [] } = useGroupsGroups()

  const [myGroups, moreGroups] = partition(groups, g => g.canCreateConversation)

  const sections: GroupsSection[] = [
    { key: SectionKey.my, data: myGroups },
    { key: SectionKey.more, data: moreGroups },
  ].filter(({ data }) => data.length > 0)

  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
    navigation.navigate('New', {
      screen: 'ConversationNew',
      params: {
        ...route.params,
        group_id: group.id,
        source_app_name: 'Groups',
      },
    })
  }

  return (
    <SectionList<GroupsGroupResource, GroupsSection>
      sections={sections}
      keyExtractor={item => item.id.toString()}
      stickySectionHeadersEnabled={false}
      contentContainerStyle={styles.contentContainer}
      renderSectionHeader={({ section }) => {
        const { title, subtitle } = SECTION_CONFIG[section.key]
        return (
          <View
            style={[
              styles.sectionHeader,
              section.key === SectionKey.more && styles.sectionHeaderSpaced,
            ]}
          >
            <View>
              <Heading variant="h3">{title}</Heading>
              {subtitle && (
                <Text variant="tertiary" style={styles.sectionSubtitle}>
                  {subtitle}
                </Text>
              )}
            </View>
          </View>
        )
      }}
      renderItem={({ item: group, section }) => {
        const { ListItemComponent } = SECTION_CONFIG[section.key]
        return <ListItemComponent group={group} onPress={handleNavigateToConversationNew} />
      }}
    />
  )
}

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

  return StyleSheet.create({
    contentContainer: {
      paddingBottom: bottom,
    },
    sectionHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      padding: 16,
      paddingBottom: 4,
    },
    sectionHeaderSpaced: {
      marginTop: 16,
    },
    sectionSubtitle: {
      marginTop: 4,
    },
  })
}