import { StaticScreenProps, useNavigation } from '@react-navigation/native'
import React from 'react'
import { StyleSheet } from 'react-native'
import { PressableRow } from '../components'
import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
import { useTheme } from '../hooks'
import { useGroup, useGroupMembershipUpdate } from './notification_settings/hooks/groups'

export const GroupNotificationLevelSelectScreenOptions = getFormSheetScreenOptions({
  headerTitle: 'Notification level',
  sheetAllowedDetents: [0.35],
})

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

export function GroupNotificationLevelSelectScreen({
  route,
}: GroupNotificationLevelSelectScreenProps) {
  const { groupId } = route.params
  const navigation = useNavigation()
  const styles = useStyles()
  const { colors } = useTheme()
  const { data: group } = useGroup({ groupId })
  const { mutate: updateNotificationLevel } = useGroupMembershipUpdate({ groupId })

  const notificationLevelOptions = group.myGroupMembership?.notificationLevelOptions ?? []

  const handleSelect = (value: string, isActive: boolean) => {
    if (!isActive) {
      updateNotificationLevel({ notificationLevel: value })
    }
    navigation.goBack()
  }

  return (
    <FormSheet.Root contentStyle={styles.content}>
      {notificationLevelOptions.map(option => (
        <PressableRow
          key={option.value}
          text={option.description}
          isActive={option.enabled}
          onPress={() => handleSelect(option.value, option.enabled)}
          iconColor={colors.statusSuccessIcon}
          style={styles.row}
        />
      ))}
    </FormSheet.Root>
  )
}

const useStyles = () => {
  return StyleSheet.create({
    content: {
      paddingTop: 20,
    },
    row: {
      borderBottomWidth: 0,
    },
  })
}