import { useRoute, RouteProp } from '@react-navigation/native'
import React from 'react'
import { Linking, StyleSheet, View, ScrollView } from 'react-native'
import { Heading } from '../../components'
import { Icon, Text, TextInlineButton } from '../../components/display'
import { useTheme } from '../../hooks'
import type { AgeCheckParams } from './screen_props'

export interface AgeCheckUnderageScreenProps {
  contactEmail?: string
}

export function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenProps = {}) {
  const styles = useStyles()
  const route = useRoute<RouteProp<AgeCheckParams, 'UnderagePerson'>>()

  const email = contactEmail ?? route?.params?.contactEmail

  const openChurchAdminHelp = () => {
    if (!email) return
    Linking.openURL(`mailto:${email}`)
  }

  const openTerms = () => {
    Linking.openURL('https://www.planningcenter.com/terms')
  }

  return (
    <ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
      <Icon name="general.outlinedTextMessage" size={32} style={styles.icon} />

      <View style={styles.content}>
        <Heading variant="h3" style={styles.baseText}>
          Chat is only available for users 13 and older.
        </Heading>
        <Text variant="tertiary" style={styles.baseText}>
          If you submitted the wrong birthdate by accident,{` `}
          {email ? (
            <TextInlineButton
              onPress={openChurchAdminHelp}
              accessibilityRole="link"
              accessibilityHint="Opens email client to contact your church administrator"
              style={styles.linkText}
            >
              please contact your church administrator
            </TextInlineButton>
          ) : (
            <>please contact your church administrator</>
          )}
          {` `}
          to update your profile.
        </Text>
        <Text variant="tertiary" style={styles.baseText}>
          For more information, view our{` `}
          <TextInlineButton
            onPress={openTerms}
            accessibilityRole="link"
            accessibilityHint="Opens terms of service in browser"
            style={styles.linkText}
          >
            terms of service
          </TextInlineButton>
          .
        </Text>
      </View>
    </ScrollView>
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  return StyleSheet.create({
    scrollView: {
      flex: 1,
    },
    container: {
      alignItems: 'center',
      justifyContent: 'center',
      gap: 16,
      padding: 16,
      minHeight: '100%',
    },
    icon: {
      color: colors.iconColorDefaultDisabled,
    },
    content: {
      alignItems: 'center',
      gap: 8,
      maxWidth: 250,
    },
    baseText: {
      textAlign: 'center',
      color: colors.textColorDefaultSecondary,
    },
    linkText: {
      fontSize: 14,
    },
  })
}