import React from 'react';
import { TouchableOpacity, Button, ScrollView, ActivityIndicator, View, StyleSheet, Text } from 'react-native';
import PropTypes from 'prop-types';
import DeviceInfo from 'react-native-device-info';
import LocalizedString from '../localization';
import CustomTextInput from '../components/custom-text-input';
import AuthenticationPageHeader from '../components/authentication-page-header';
import Constants from '../constants';

const userIcon = require('../../assets/icons/ic_user.png');
const unlockedIcon = require('../../assets/icons/ic_unlocked.png');

const styles = StyleSheet.create({
  mainContainer: { flex: 1 },
  loginButtonContainer: {
    marginHorizontal: 20,
    height: 60,
    marginTop: 20,
    backgroundColor: Constants.COLOR_MAIN,
    alignSelf: 'stretch',
    borderRadius: 50,
  },
  loginButtonText: {
    fontFamily: Constants.FONT_BOLD,
    fontWeight: 'normal',
    fontSize: 19,
  },
  viewBody: {
    flex: 1, marginTop: -25,
  },
  viewFooter: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  background: {
    resizeMode: 'contain',
  },
  logo: {
    resizeMode: 'contain',
    height: 90,
  },
  textLogin: {
    backgroundColor: 'transparent',
    fontFamily: Constants.FONT_BOLD,
    fontSize: 18,
    color: Constants.COLOR_MAIN,
  },
  textForgotPassword: {
    alignSelf: 'flex-end',
    fontFamily: Constants.FONT_REGULAR,
    fontSize: 12,
    marginTop: 10,
    marginRight: 20,
  },
  textDontHaveAccount: {
    fontFamily: Constants.FONT_REGULAR,
    fontSize: 11,
    color: 'black',
  },
  textRegister: {
    fontFamily: Constants.FONT_BOLD,
    fontSize: 20,
    color: 'black',
  },
  appVersionText: {
    fontFamily: Constants.FONT_LIGHT_ITALIC,
    fontSize: 10,
    textAlign: 'right',
    marginHorizontal: 10,
    marginTop: 10,
  },
  verticalSpacer: {
    height: 15,
  },
});

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      editable: true,
    };
    this.isComponentMounted = false;

    this.onChangeUsernameText = this.onChangeUsernameText.bind(this);
    this.onChangePasswordText = this.onChangePasswordText.bind(this);
    this.onLoginPressed = this.onLoginPressed.bind(this);
  }

  componentDidMount() {
    this.isComponentMounted = true;
  }

  componentWillUnmount() {
    this.isComponentMounted = false;
  }

  onChangeUsernameText = (text) => {
    this.setState({ username: text.trim() });
  }

  onChangePasswordText = (text) => {
    this.setState({ password: text.trim() });
  }

  onLoginPressed = async () => {
    try {
      this.setState({ editable: false });
      await this.props.onLoginPressed(this.state.username, this.state.password);
    } finally {
      if (this.isComponentMounted) {
        this.setState({ editable: true });
      }
    }
  }

  onForgotPasswordPressed = () => {
    if (this.state.editable) {
      this.props.onForgotPasswordPressed();
    }
  }

  renderRegisterButton = () => {
    if (this.state.editable) {
      return (
        <View style={styles.viewFooter}>
          <Text style={styles.textDontHaveAccount}>
            {LocalizedString.loginScreen.doNotHaveAccountLabel}
          </Text>
          <TouchableOpacity onPress={this.props.onRegisterPressed}>
            <Text style={styles.textRegister}>{LocalizedString.loginScreen.registerLabel}</Text>
          </TouchableOpacity>
          <Text style={styles.appVersionText}>v{DeviceInfo.getVersion()}</Text>
        </View>
      );
    }
    return null;
  }

  renderActivityIndicator = () => {
    if (!this.state.editable) {
      return (
        <View>
          <View style={styles.verticalSpacer} />
          <ActivityIndicator size="large" color={Constants.COLOR_MAIN} />
        </View>
      );
    }
    return null;
  }

  render() {
    const styleDisabled = this.state.editable ? null : { color: Constants.COLOR_HORIZONTAL_LINE };
    return (
      <ScrollView>
        <View style={styles.mainContainer} >
          <AuthenticationPageHeader title={LocalizedString.loginScreen.title} />
          <View style={styles.viewBody}>
            <CustomTextInput
              fieldName={LocalizedString.loginScreen.usernameLabel}
              placeholder={LocalizedString.loginScreen.usernamePlaceholder}
              icon={userIcon}
              onChangeText={this.onChangeUsernameText}
              editable={this.state.editable}
              value={this.state.username}
              keyboardType="email-address"
            />
            <View style={styles.verticalSpacer} />
            <CustomTextInput
              fieldName={LocalizedString.loginScreen.passwordLabel}
              placeholder={LocalizedString.loginScreen.passwordPlaceholder}
              icon={unlockedIcon}
              secureTextEntry
              onChangeText={this.onChangePasswordText}
              editable={this.state.editable}
              value={this.state.password}
            />
            <TouchableOpacity onPress={this.onForgotPasswordPressed}>
              <Text style={[styles.textForgotPassword, styleDisabled]}>
                {LocalizedString.loginScreen.forgetPasswordLabel}
              </Text>
            </TouchableOpacity>
            <View style={styles.verticalSpacer} />
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <View style={{ flex: 1 }} />
              <View style={{ flex: 2 }}>
                <Button
                  disabled={!this.state.editable}
                  title={LocalizedString.loginScreen.signInCaption}
                  style={{ container: styles.loginButtonContainer, text: styles.loginButtonText }}
                  onPress={this.onLoginPressed}
                />
              </View>
              <View style={{ flex: 1 }} />
            </View>
            <View style={styles.verticalSpacer} />
            {this.renderActivityIndicator()}
            {this.renderRegisterButton()}
          </View>
        </View>
      </ScrollView>
    );
  }
}

Login.propTypes = {
  onLoginPressed: PropTypes.func.isRequired,
  onRegisterPressed: PropTypes.func.isRequired,
  onForgotPasswordPressed: PropTypes.func.isRequired,
};