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 { useConversation } from '../hooks/use_conversation'
import { useConversationMembershipUpdate } from '../hooks/use_conversation_membership'
import { NotificationLevelValue } from '../types'

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

export type ConversationNotificationLevelSelectScreenProps = StaticScreenProps<{
  conversation_id: number
}>

export function ConversationNotificationLevelSelectScreen({
  route,
}: ConversationNotificationLevelSelectScreenProps) {
  const { conversation_id } = route.params
  const navigation = useNavigation()
  const styles = useStyles()
  const { colors } = useTheme()
  const { data: conversation } = useConversation({ conversation_id })
  const { mutate: updateNotificationLevel } = useConversationMembershipUpdate({ conversation_id })

  const notificationLevelOptions =
    conversation.conversationMembership?.notificationLevelOptions ?? []

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

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

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