import React, { useState } from 'react'
import { Text, TouchableOpacity, View, Image } from 'react-native'
import { open } from '../util'
import { LoginErrorMessage } from '../components/LoginErrorMessage'
import { useLogin } from '../components/Login'
import { LoginProgress } from '../constants/LoginProgress'
import { TextStyles } from '../Styles'
import { Colors, colorsV2 } from '../Colors'
import { SafeAreaView } from 'react-native'
import { Strings } from '../i18n'
import { BuildInfo } from '../components/BuildInfo'
import { RoundedButton } from '../components/RoundedButton'
import manifest from '../appManifest'

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 = () =>
    void setShowBuildInfo(!showBuildInfo)

  return (
    <SafeAreaView
      style={{
        backgroundColor: colorsV2.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,
            fontSize: 34,
            color: Colors.text,
            marginTop: 68,
            lineHeight: 34,
          }}
        >
          {Strings.LoginScreen.WelcomeToRealTimeInsights}
        </Text>
      </View>

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

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