text: import React, { PureComponent } from "react";
  import PropTypes from "prop-types";
  import { ActivityIndicator, Keyboard, Platform } from "react-native";
  import glamorous, { withTheme } from "glamorous-native";
  
  import { ThemePropType } from "../prop-types/theme";
  import Button from "./Button";
  
  // TODO: polish - look at fixing flashing on Android with dismissal of keyboard when hitting next button. Fixed in later RN?
  // TODO: polish - the error message doesn't seem to scroll in sync with the rest of the form with KeyboardAvoidingView? But, only on iOS, it seems
  
  class SignInForm extends PureComponent {
    static ACTIVITY_INDICATOR_VIEW_HEIGHT = 50;
  
    constructor(props) {
      super(props);
  
      this.state = {
        username: "",
        password: "",
      };
    }
  
    onContainerViewLayout = event => {
      const { onKeyboardAvoidingViewHeight } = this.props;
      onKeyboardAvoidingViewHeight(
        event.nativeEvent.layout.height -
          SignInForm.ACTIVITY_INDICATOR_VIEW_HEIGHT
      );
    };
  
    onPressSignIn = () => {
      const { authSignInAsync } = this.props;
      const { username, password } = this.state;
      if (username.length > 0 && password.length > 0) {
        Keyboard.dismiss();
        authSignInAsync({
          username,
          password,
        });
      }
    };
  
    onPressForgotPassword = () => {
      const { navigateForgotPassword } = this.props;
      navigateForgotPassword();
    };
  
    renderErrorMessage() {
      const { theme, errorMessage } = this.props;
      return (
        <glamorous.Text
          allowFontScaling={false}
          style={theme.wrongEmailOrPasswordTextStyle}
          alignSelf="flex-start"
          paddingLeft={3}
          marginTop={-15}
          marginBottom={Platform.OS === "android" ? -3 : 8}
        >
          {errorMessage || " "}
        </glamorous.Text>
      );
    }
  
    render() {
      const { theme, signingIn, authSignInReset } = this.props;
      const { username, password } = this.state;
  
      return (
        <glamorous.View onLayout={this.onContainerViewLayout}>
          <glamorous.Image
            source={require("../../assets/images/tidepool-logo-horizontal.png")}
            width={282}
            height={272}
            marginBottom={25}
            marginTop={0}
            alignSelf="center"
          />
          {this.renderErrorMessage()}
          <glamorous.TextInput
            value={username}
            allowFontScaling={false}
            innerRef={textInput => {
              this.emailTextInput = textInput;
            }}
            style={theme.signInEditFieldStyle}
            returnKeyType="next"
            selectionColor="#657ef6"
            underlineColorAndroid="#657ef6"
            keyboardType="email-address"
            autoCapitalize="none"
            autoCorrect={false}
            placeholder="Correo electrónico"
            placeholderTextColor={theme.signInEditFieldExtra.placeholderTextColor}
            keyboardAppearance={theme.signInEditFieldExtra.keyboardAppearance}
            borderColor="#e2e3e4"
            height={47.5}
            borderWidth={Platform.OS === "android" ? 0 : 1}
            paddingLeft={Platform.OS === "android" ? 3 : 12}
            onSubmitEditing={() => {
              this.passwordTextInput.focus();
            }}
            onChangeText={text => {
              this.setState({ username: text });
              authSignInReset();
            }}
          />
          <glamorous.TextInput
            value={password}
            allowFontScaling={false}
            innerRef={textInput => {
              this.passwordTextInput = textInput;
            }}
            style={theme.signInEditFieldStyle}
            secureTextEntry
            autoCapitalize="none"
            autoCorrect={false}
            returnKeyType="go"
            selectionColor="#657ef6"
            underlineColorAndroid="#657ef6"
            placeholder="Contraseña"
            placeholderTextColor={theme.signInEditFieldExtra.placeholderTextColor}
            keyboardAppearance={theme.signInEditFieldExtra.keyboardAppearance}
            borderColor="#e2e3e4"
            height={47.5}
            borderWidth={Platform.OS === "android" ? 0 : 1}
            paddingLeft={Platform.OS === "android" ? 3 : 12}
            marginTop={15}
            onChangeText={text => {
              this.setState({ password: text });
              authSignInReset();
            }}
            onSubmitEditing={this.onPressSignIn}
          />
          <glamorous.View flexDirection="row" marginLeft={-8}>
            <glamorous.TouchableOpacity
              padding={8}
              onPress={null}
            >
              {/*  <glamorous.Text
                allowFontScaling={false}
                style={theme.forgotPasswordTextStyle}
                alignSelf="flex-start"
                paddingLeft={3}
              >
                ¿Olvido la contraseña?
              </glamorous.Text>
              */}
            </glamorous.TouchableOpacity>
          </glamorous.View>
          <glamorous.View
            marginTop={-5}
            flexDirection="row"
            justifyContent="flex-end"
          >
            <Button
              onPress={this.onPressSignIn}
              title="Ingresar"
              disabled={
                signingIn || username.length === 0 || password.length === 0
              }
            />
          </glamorous.View>
          {/* Keep this wrapper view with same height as the ActivityIndicator to avoid layout shift when showing and
              hiding ActivityIndicator. Don't render ActivityIndicator unless signingIn is true. Ideally we should be
              able to remove wrapper view and just set animating property based on signingIn, but, this React Native
              bug for Android prevents that:
              https://github.com/facebook/react-native/issues/9023
              https://github.com/facebook/react-native/issues/11682
              */}
          <glamorous.View
            style={{
              height: SignInForm.ACTIVITY_INDICATOR_VIEW_HEIGHT,
            }}
          >
            {signingIn && (
              <ActivityIndicator
                style={{
                  height: SignInForm.ACTIVITY_INDICATOR_VIEW_HEIGHT,
                  alignSelf: "center",
                }}
                size="large"
                color={theme.colors.activityIndicator}
                animating
              />
            )}
          </glamorous.View>
        </glamorous.View>
      );
    }
  }
  
  SignInForm.propTypes = {
    theme: ThemePropType.isRequired,
    authSignInReset: PropTypes.func.isRequired,
    authSignInAsync: PropTypes.func.isRequired,
    navigateForgotPassword: PropTypes.func.isRequired,
    signingIn: PropTypes.bool.isRequired,
    errorMessage: PropTypes.string,
    onKeyboardAvoidingViewHeight: PropTypes.func,
  };
  
  SignInForm.defaultProps = {
    errorMessage: "",
    onKeyboardAvoidingViewHeight: () => {},
  };
  
  export default withTheme(SignInForm);
  