import React, { useState } from 'react'
import { Text, TouchableOpacity, View, Image, SafeAreaView } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import manifest from '../appManifest'
import { BuildInfo } from '../components/BuildInfo'
import { useLogin } from '../components/Login'
import { LoginErrorMessage } from '../components/LoginErrorMessage'
import { RoundedButton } from '../components/RoundedButton'
import { LoginProgress } from '../constants/LoginProgress'
import { Strings } from '../i18n'
import { open } from '../util'

const RequestAccessButton: React.FC<{ onPress: () => void }> = ({
  onPress,
}) => (
  <TouchableOpacity
    style={{
      justifyContent: 'center',
      alignItems: 'center',
      padding: 33,
    }}
    onPress={onPress}
  >
    <Text style={{ ...TextStyles.body }}>
      {Strings.LoginScreen.RequestAccess}
    </Text>
  </TouchableOpacity>
)

export function LoginScreen(): React.ReactElement {
  const { login, loading, error } = useLogin()
  const [showBuildInfo, setShowBuildInfo] = useState(false)
  const toggleBuildInfo: () => void = () => setShowBuildInfo(!showBuildInfo)

  return (
    <SafeAreaView
      style={{
        backgroundColor: colors.black,
        flex: 1,
        marginTop: 110,
        marginBottom: 60,
        marginHorizontal: 23,
      }}
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'flex-start',
          alignItems: 'flex-start',
        }}
      >
        <TouchableOpacity onPress={toggleBuildInfo}>
          <Image
            source={require('../../assets/sma-wave.png')}
            style={{ width: 60, height: 60 }}
          />
        </TouchableOpacity>
        <Text
          style={{
            ...TextStyles.h3,
            color: colors.midWhite,
            marginTop: 68,
          }}
        >
          {Strings.LoginScreen.WelcomeToRealTimeInsights}
        </Text>
      </View>

      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        {error || loading === LoginProgress.LOGGED_OUT ? (
          <View>
            <RoundedButton onPress={login} label={Strings.Shared.LogIn} />
            <RequestAccessButton
              onPress={() => open(manifest.extra.requestAccessUrl)}
            />
          </View>
        ) : (
          <Text style={{ ...TextStyles.body, color: colors.midWhite }}>
            {Strings.Shared.LoggingIn} {''.padEnd(loading, '.')}
          </Text>
        )}

        {error && <LoginErrorMessage error={error} loading={loading} />}
      </View>
      <BuildInfo
        style={{
          display: showBuildInfo ? 'flex' : 'none',
          left: 20,
        }}
      />
    </SafeAreaView>
  )
}