import { PlatformPressable } from '@react-navigation/elements'
import { StaticScreenProps, useNavigation } from '@react-navigation/native'
import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
import React, { useEffect } from 'react'
import { Platform, StyleSheet, View } from 'react-native'
import { Heading, Icon, Text } from '../components'
import { useTheme } from '../hooks'
import { platformFontWeightBold } from '../utils/styles'
import type { GroupNotificationLevelSelectScreenProps } from './group_notification_level_select_screen'
import { useGroup } from './notification_settings/hooks/groups'

type GroupNotificationSettingsStackParamList = {
  GroupNotificationLevelSelect: GroupNotificationLevelSelectScreenProps['route']['params']
}

export type GroupNotificationSettingsScreenProps = StaticScreenProps<{
  groupId: number | string
  title: string
}>

export function GroupNotificationSettingsScreen({ route }: GroupNotificationSettingsScreenProps) {
  const { groupId, title } = route.params
  const navigation =
    useNavigation<NativeStackNavigationProp<GroupNotificationSettingsStackParamList>>()
  const styles = useStyles()
  const { data: group } = useGroup({ groupId })

  const notificationLevelDescription = group.myGroupMembership?.notificationLevelDescription

  useEffect(() => {
    if (!group.name || title === group.name) return

    navigation.setOptions({ title: group.name })
  }, [group.name, title, navigation])

  const handleOpenSelector = () => {
    navigation.navigate('GroupNotificationLevelSelect', { groupId })
  }

  return (
    <View style={styles.container}>
      <View style={styles.sectionOuter}>
        <View style={styles.sectionInner}>
          <Heading variant="h2" style={styles.sectionHeading}>
            Group notification settings
          </Heading>
          <Text variant="tertiary" style={styles.sectionSubtitle}>
            The settings are applied to all conversations in{' '}
            <Text variant="tertiary" style={styles.groupNameBold}>
              {group.name || title}
            </Text>
          </Text>
        </View>
      </View>
      <PlatformPressable
        style={styles.settingRowPressable}
        onPress={handleOpenSelector}
        accessibilityRole="button"
        accessibilityLabel="Notify me for"
        accessibilityHint={`Currently set to ${notificationLevelDescription}. Tap to change.`}
      >
        <View style={styles.settingRowInner}>
          <View style={styles.settingRowText}>
            <Text>Notify me for</Text>
            {Boolean(notificationLevelDescription) && (
              <Text variant="tertiary">{notificationLevelDescription}</Text>
            )}
          </View>
          {Platform.OS === 'ios' && (
            <Icon
              name="general.rightChevron"
              size={16}
              style={styles.chevron}
              accessibilityElementsHidden
            />
          )}
        </View>
      </PlatformPressable>
    </View>
  )
}

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

  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.surfaceColor100,
    },
    sectionOuter: {
      paddingLeft: 16,
      backgroundColor: colors.surfaceColor100,
    },
    sectionInner: {
      paddingRight: 16,
      paddingTop: 24,
      paddingBottom: 12,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    sectionHeading: {
      paddingBottom: 12,
    },
    sectionSubtitle: {
      color: colors.textColorDefaultSecondary,
      paddingBottom: 2,
    },
    groupNameBold: {
      fontWeight: platformFontWeightBold,
    },
    settingRowPressable: {
      paddingLeft: 16,
    },
    settingRowInner: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingRight: 16,
      paddingVertical: 12,
    },
    settingRowText: {
      flex: 1,
      gap: 2,
    },
    chevron: {
      color: colors.iconColorDefaultDisabled,
    },
  })
}