import * as MailComposer from 'expo-mail-composer'
import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'

import { colors } from '../Colors'
import { ReactNavigationProps } from '../Navigation'
import { TextStyles } from '../Styles'
import manifest from '../appManifest'
import { AutoLayout } from '../components/AutoLayout'
import { BuildInfo } from '../components/BuildInfo'
import { Bulletins } from '../components/Bulletins'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { FeedbackModal, useFeedbackModal } from '../components/FeedbackModal'
import { useLogout } from '../components/Logout'
import { ScreenNames } from '../constants/ScreenNames'
import { Strings } from '../i18n'
import ArrowRight from '../icons/ArrowRight'
import { open } from '../util'

const screenName = 'Settings Screen'

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

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

  const inviteEmail = {
    subject: Strings.InviteEmail.subject,
    body: Strings.InviteEmail.body,
    ccRecipients: manifest.extra.invite.ccRecipients,
  }

  return (
    <>
      <CommonScreenContainer screenName={screenName}>
        <View style={{ height: 125, padding: 16, justifyContent: 'flex-end' }}>
          <Text style={[TextStyles.h4, { color: colors.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={() => {
                MailComposer.composeAsync({ ...inviteEmail, isHtml: true })
              }}
            />
            <SettingsScreenButton
              text={Strings.Shared.SendFeedback}
              onPress={() => setFeedbackModalOpen(true)}
            />
          </AutoLayout>
          <TouchableOpacity onPress={logout}>
            <Text
              style={[
                TextStyles.body,
                {
                  textTransform: 'capitalize',
                  color: colors.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>
      <FeedbackModal
        screenName={screenName}
        screenTitle={Strings.Shared.Settings}
        open={feedbackModalOpen}
        onClose={() => setFeedbackModalOpen(false)}
      />
    </>
  )
}