import { PlatformPressable } from '@react-navigation/elements'
import { StaticScreenProps, useNavigation } from '@react-navigation/native'
import React, { useCallback } from 'react'
import { Platform, StyleSheet, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Heading, Icon, Text, VersionFooter } from '../components'
import { Switch } from '../components/display/switch'
import { useDirectMessagesEligible, useTheme } from '../hooks'
import { useAppName } from '../hooks/use_app_name'
import { usePersonSettings } from '../hooks/use_person_settings'

export type SettingsScreenProps = StaticScreenProps<{}>

export function SettingsScreen({}: SettingsScreenProps) {
  const styles = useStyles()
  const { directMessagesDisabled, setDirectMessagesDisabled, isMutating } = usePersonSettings()
  const directMessagesEligible = useDirectMessagesEligible()
  const appName = useAppName()
  const navigation = useNavigation()

  const handleNotificationSettings = useCallback(() => {
    navigation.navigate('NotificationSettings', {})
  }, [navigation])

  const handleGetHelp = useCallback(() => {
    navigation.navigate('GetHelp', { type: 'chat' })
  }, [navigation])

  return (
    <View style={styles.container}>
      <View style={styles.sectionOuter}>
        <View style={styles.sectionHeader}>
          <Heading variant="h2">Messages</Heading>
        </View>
        {directMessagesEligible && (
          <View style={styles.settingRow}>
            <View style={styles.settingRowText}>
              <Text>Allow direct messages</Text>
              <Text variant="tertiary">
                When off, you can't be added to new direct messages, and any you're already in will
                be turned off.
              </Text>
            </View>
            <Switch
              value={!directMessagesDisabled}
              onValueChange={enabled => setDirectMessagesDisabled(!enabled)}
              disabled={isMutating}
            />
          </View>
        )}
        <NavRow label="Notification settings" onPress={handleNotificationSettings} />
        {appName !== 'services' && <NavRow label="Get help" onPress={handleGetHelp} />}
      </View>
      <View style={styles.footer}>
        <VersionFooter />
      </View>
    </View>
  )
}

interface NavRowProps {
  label: string
  onPress: () => void
}

function NavRow({ label, onPress }: NavRowProps) {
  const styles = useNavRowStyles()
  return (
    <PlatformPressable
      style={styles.container}
      onPress={onPress}
      accessibilityRole="button"
      accessibilityLabel={label}
    >
      <View style={styles.inner}>
        <Text>{label}</Text>
        {Platform.OS === 'ios' && (
          <Icon name="general.rightChevron" size={16} style={styles.chevron} />
        )}
      </View>
    </PlatformPressable>
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  const insets = useSafeAreaInsets()
  return StyleSheet.create({
    container: {
      flex: 1,
    },
    footer: {
      flex: 1,
      justifyContent: 'flex-end',
      paddingBottom: Math.max(insets.bottom, 8),
    },
    sectionOuter: {
      paddingLeft: 16,
    },
    sectionHeader: {
      paddingRight: 16,
      paddingTop: 24,
      paddingBottom: 12,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    settingRow: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      justifyContent: 'space-between',
      paddingRight: 16,
      paddingVertical: 12,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    settingRowText: {
      flex: 1,
      gap: 8,
    },
  })
}

const useNavRowStyles = () => {
  const { colors } = useTheme()
  return StyleSheet.create({
    container: {
      paddingLeft: 0,
    },
    inner: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingRight: 16,
      paddingVertical: 14,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    chevron: {
      color: colors.iconColorDefaultDisabled,
    },
  })
}