import { StaticScreenProps, useNavigation } from '@react-navigation/native'
import { useCallback, useMemo } from 'react'
import { Alert, Linking, StyleSheet, View } from 'react-native'
import { Heading, PressableRow, Text, TextInlineButton } from '../components'
import { useApiGet, useTheme } from '../hooks'
import { useAppName } from '../hooks/use_app_name'
import { useOrganization } from '../hooks/use_organization'
import { ResourceObject } from '../types'
import { Clipboard } from '../utils'

type GetHelpScreenRouteProps = {
  type?: 'chat' | 'general'
}

type GetHelpScreenProps = StaticScreenProps<GetHelpScreenRouteProps>

interface HelpUrlResource extends ResourceObject {
  id: number
  link: string
  title: string
  product: 'services' | 'churchcenter'
  type: 'chat' | 'general'
}

const useHelpUrls = () => {
  const { data: helpUrls = [] } = useApiGet<HelpUrlResource[]>({
    url: '/help_urls',
    data: {
      fields: {
        HelpUrl: [],
      },
    },
  })

  return helpUrls
}

export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
  const { type = 'chat' } = route.params || {}
  const styles = useStyles()
  const appName = useAppName()
  const navigation = useNavigation()
  const { data: organization } = useOrganization()
  const contactPresent = organization?.contactEmail || organization?.contactPhoneNumber
  const helpUrls = useHelpUrls()
  const appSpecificHelpUrls = useMemo(
    () =>
      helpUrls
        .filter(helpUrl => helpUrl.product === appName)
        .filter(helpUrl => helpUrl.type.includes(type)),
    [helpUrls, appName, type]
  )

  const handleNavigateToBugReport = useCallback(() => {
    navigation.navigate('BugReport')
  }, [navigation])

  return (
    <View style={[styles.container]}>
      {appSpecificHelpUrls.length > 0 && (
        <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
          How-to articles
        </Heading>
      )}
      {appSpecificHelpUrls.map(helpUrl => (
        <PressableRow
          key={helpUrl.id}
          onPress={() => Linking.openURL(helpUrl.link)}
          text={helpUrl.title}
          isActive={true}
          iconPath="general.newWindow"
        />
      ))}
      {contactPresent && (
        <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
          Contact {organization?.name}
        </Heading>
      )}
      <ContactRow email={organization?.contactEmail} />
      <ContactRow phone={organization?.contactPhoneNumber} />
      <Heading variant="h2" style={[styles.heading]}>
        Report a bug
      </Heading>
      <View style={styles.text}>
        <Text>
          Having an issue?{' '}
          <TextInlineButton onPress={handleNavigateToBugReport}>
            Submit a bug report
          </TextInlineButton>{' '}
          to the development team.
        </Text>
      </View>
    </View>
  )
}

const ContactRow = ({ email, phone }: { email?: string; phone?: string }) => {
  const contact = email || phone
  if (!contact) return null

  return (
    <PressableRow
      onPress={() => {
        if (email) {
          sendEmail(contact)
        } else {
          placePhoneCall(contact)
        }
      }}
      text={contact || ''}
      isActive={true}
      iconPath={email ? 'services.email' : 'general.phone'}
    />
  )
}

export function sendEmail(email: string) {
  if (!email) return

  const url = encodeURI(`mailto:${email}`)

  Linking.openURL(url).catch(() => {
    Alert.alert('Oops', `Unable to open: ${email}`, [
      { text: 'Copy to clipboard', onPress: () => Clipboard.setStringAsync(email) },
      { text: 'OK' },
    ])
  })
}

export function placePhoneCall(phoneNumber: string) {
  if (!phoneNumber) return

  const url = encodeURI(`tel:${phoneNumber}`)

  Linking.openURL(url).catch(() => {
    Alert.alert('Oops', `Unable to open: ${phoneNumber}`, [
      { text: 'Copy to clipboard', onPress: () => Clipboard.setStringAsync(phoneNumber) },
      { text: 'OK' },
    ])
  })
}

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

  return StyleSheet.create({
    container: {
      flex: 1,
    },
    text: {
      paddingVertical: 4,
      paddingHorizontal: 16,
    },
    heading: {
      marginLeft: 16,
      paddingTop: 24,
      paddingBottom: 12,
    },
    headingBottomBorder: {
      marginLeft: 16,
      paddingLeft: 0,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    headingAux: {
      paddingTop: 24,
      paddingHorizontal: 16,
    },
  })
}