import { openURL } from 'expo-linking'
import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
import manifest from '../appManifest'
import { colorsV2 } from '../Colors'
import { AutoLayout } from '../components/AutoLayout'
import { BuildInfo } from '../components/BuildInfo'
import { Bulletins } from '../components/Bulletins'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { useLogout } from '../components/Logout'
import { ScreenNames } from '../constants/ScreenNames'
import { Strings } from '../i18n'
import { ReactNavigationProps } from '../Navigation'
import { TextStylesV2 } from '../Styles'
import { open } from '../util'
import ArrowRight from '../icons/ArrowRight'
import * as MailComposer from 'expo-mail-composer'

export const SettingsScreenButton: React.FC<{
  text: string
  onPress: () => void
  style?: StyleProp<ViewStyle>
}> = ({ text, onPress, style }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[
        style,
        {
          backgroundColor: colorsV2.metals.metal2,
          padding: 16,
          borderRadius: 8,
          flexDirection: 'row',
          justifyContent: 'space-between',
        },
      ]}
    >
      <Text style={[TextStylesV2.body, { color: colorsV2.white }]}>{text}</Text>
      <ArrowRight />
    </TouchableOpacity>
  )
}

export const SettingsScreen: React.FC<
  ReactNavigationProps<ScreenNames.Settings>
> = () => {
  const { releaseNotesUrl, feedback, invite } = manifest.extra
  const logout = useLogout()

  return (
    <CommonScreenContainer>
      <View style={{ height: 125, padding: 16, justifyContent: 'flex-end' }}>
        <Text style={[TextStylesV2.h4, { color: colorsV2.white, height: 48 }]}>
          {Strings.Shared.Settings}
        </Text>
      </View>
      <ScrollView style={{ padding: 16 }}>
        <AutoLayout gap={10}>
          <SettingsScreenButton
            text={Strings.Shared.WhatsNew2}
            onPress={() => open(releaseNotesUrl)}
          />

          <SettingsScreenButton
            text={Strings.Shared.InviteATeamMember}
            onPress={() =>
              void MailComposer.composeAsync({ ...invite, isHtml: true })
            }
          />
          <SettingsScreenButton
            text={Strings.Shared.SendFeedback}
            onPress={() =>
              void openURL(
                `mailto:${feedback.emailAddress}?subject=${feedback.emailSubject}`
              )
            }
          />
        </AutoLayout>
        <TouchableOpacity onPress={logout}>
          <Text
            style={[
              TextStylesV2.body,
              {
                textTransform: 'capitalize',
                color: colorsV2.white,
                textAlign: 'center',
                margin: 16,
              },
            ]}
          >
            {Strings.Shared.LogOut}
          </Text>
        </TouchableOpacity>
        <View style={{ alignItems: 'center' }}>
          <BuildInfo
            style={{
              paddingBottom: 20,
              paddingTop: 6,
              marginTop: 6,
            }}
          />
        </View>
        <Bulletins />
      </ScrollView>
    </CommonScreenContainer>
  )
}