import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { View, ImageBackground, Image } from 'react-native'

import LocalizedText from '../../components/LocalizedText'
import Input from '../../components/Input'
import PasswordField from '../../components/PasswordField'
import Button from '../../components/Button'
import Container from '../../components/Container'
import { t } from '../../services/Localization'
import styles from './style'

const background = require('../../../assets/images/background.png')
const volteeLogo = require('../../../assets/images/logo/volteeLogo2.png')

class LoginView extends Component {
  render() {
    const {
      handleInputChange,
      handleLogin,
      handleForgotPassword,
      handleFacebookLogin,
      handleFocus,
      email,
      password,
      errorMessage,
      user: { isAuthenticating },
    } = this.props
    return (
      <ImageBackground style={styles.backgroundContainer} source={background}>
        <Container keyboardAvoidingView backgroundColor="transparent">
          <View style={styles.loginContainer}>
            <View style={styles.logo}>
              <Image source={volteeLogo} />
            </View>
            <Button
              onPress={handleFacebookLogin}
              text="login.facebookLoginButton"
              type="facebook"
            />
            <LocalizedText style={styles.or} text="login.or" upperCase />
            <Input
              customStyle={styles.inputPadding}
              onChangeText={text => handleInputChange('email', text)}
              error={errorMessage}
              errorMessage={errorMessage}
              onFocus={handleFocus}
              value={email}
              autoCapitalize="none"
              keyboardType="email-address"
              placeholder={t('login.emailPlaceholder')}
            />
            <PasswordField
              customStyle={styles.inputPadding}
              error={errorMessage}
              errorMessage={errorMessage}
              onChangeText={text => handleInputChange('password', text)}
              onFocus={handleFocus}
              value={password}
              placeholder={t('login.passwordPlaceholder')}
              secureTextEntry
            />
            <Button
              loading={isAuthenticating}
              onPress={handleLogin}
              text="login.loginButton"
              type="primary"
            />
            <LocalizedText
              style={styles.forgotPasswordButton}
              onPress={handleForgotPassword}
              text="login.forgotPassword"
            />
          </View>
        </Container>
      </ImageBackground>
    )
  }
}

LoginView.propTypes = {
  handleInputChange: PropTypes.func.isRequired,
  handleLogin: PropTypes.func.isRequired,
  handleForgotPassword: PropTypes.func.isRequired,
  handleFacebookLogin: PropTypes.func.isRequired,
  handleFocus: PropTypes.func.isRequired,
  errorMessage: PropTypes.string,
  email: PropTypes.string,
  password: PropTypes.string,
  user: PropTypes.instanceOf(Object),
}

export default LoginView