login

/* global require */
/* global console */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  View,
  ScrollView,
  Image,
} from 'react-native';
import { ScrollableTabBar } from 'react-native-scrollable-tab-view';
import { Tabs, Toast } from 'native-base';

import deviceStorage from '../services/deviceStorage';

import { Form } from 'native-base';
import axios from 'axios';

import Text from '../elements/Text';

import TextInput from '../elements/TextInput';
import PrimeButton from '../elements/PrimeButton';

import SignUp from './login/SignUp';

import CommonStyles from '../styles/CommonStyles';
import {
  responsiveWidth,
  responsiveHeight,
  marginHorizontal,
  spaceVertical,
  NAV_HEIGHT,
  STATUSBAR_HEIGHT,
  deviceHeight,
  scrollableTabHeight,
  colors,
  fontFamily,
  fontSize,
  bottomTxtHeight,
  btnWidth,
  btnHeight,
  inputHeight,
} from '../styles/variables';

import { userIc, passIc } from '../styles/icon-variables';

const logoWidth = responsiveWidth(22.67);
const logoHeight = logoWidth * 0.258;

export default class LoginScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signinLayout: {
        width: null,
        height: null,
      },
      signupLayout: {
        width: null,
        height: null,
      },
      logoContLayout: {
        width: null,
        height: null,
      }
    };
    state = {
      username: '',
      password: '',
      auth_token: ''
    }
  }

  loginUser() {
    const { email, password } = this.state;

    this.setState({ error: '', loading: true });

    // NOTE Post to HTTPS only in production
    axios.post("https://api.hellobeauty.id/token",{
        username: email,
        password: password
    })
    .then((response) => {
      console.log(response.token);
      deviceStorage.saveKey("token", response.token);
      console.log("Logged In");
      this.props.navigation.navigate('InboxScreen',
      {jwt : response.token}
      );
    })
    .catch((error) => {
      console.log(error);
      this.setState({
        error: 'Login Failed',
        loading: false
      });
    });
  }



  render() {
    const { email, password, error, loading } = this.state;
    const logoContHeight = this.state.logoContLayout.height;
    const signinHeight = this.state.signinLayout.height;
    const signinBottomHeight = deviceHeight - (scrollableTabHeight + signinHeight + logoContHeight);

    const signInBtnSetting = {
      btnWidth: btnWidth.normal,
      btnHeight: btnHeight,
      style: {
        marginBottom: spaceVertical.semiSmall,
      }
    };

    const signUpBtnSetting = {
      btnWidth: btnWidth.normal,
      btnHeight: btnHeight,
      backgroundColor: colors.blue,
      borderColor: colors.blue,
    };

    const signupHeight = this.state.signupLayout.height;
    const signupBottomHeight = deviceHeight - (scrollableTabHeight + signupHeight + logoContHeight);

    return (
      <View style={CommonStyles.container}>
        {/* logo start here */}
        <View
          style={styles.logo}
          onLayout={this.onLogoContLayout.bind(this)}
        >
          <Image
            source={require('../../img/imba/logo-hb.png')}
            style={{width: logoWidth, height: logoHeight, alignItems: "center"}}
          />
        </View>
        {/* logo end here */}

        <Tabs
          initialPage={0}
          renderTabBar={() =>
            <ScrollableTabBar
              style={{
                height: scrollableTabHeight,
              }}
              tabsContainerStyle={{
                height: scrollableTabHeight,
                alignItems: 'flex-end',
              }}
            />
          }
          ref={(tabView) => { this.tabView = tabView; }}
          tabBarUnderlineStyle={{
            backgroundColor: colors.black
          }}
          tabBarBackgroundColor={colors.white}
          tabBarActiveTextColor={colors.black}
          tabBarInactiveTextColor={colors.gray}
          tabBarTextStyle={{
            fontFamily: fontFamily.medium,
            fontSize: fontSize.medium
          }}
        >
          {/* sign in form start here */}
          <ScrollView heading='SIGN IN'>
            <View onLayout={this.onSigninLayout.bind(this)}>
              <View style={styles.container}>
                <Form style={styles.form}>
                  <TextInput
                    inputHeight={inputHeight}
                    onChangeText={email => this.setState({ email })}
                    label='Email'
                    value={email}
                    leftIcon={require('../../img/icons/ic_user.png')}
                    leftIconStyles={{
                      width: userIc.width,
                      height: userIc.height
                    }}/>
                  <TextInput
                    inputHeight={inputHeight}
                    error={this.state.errorPassword}
                    onChangeText={password => this.setState({ password })}
                    label='Password'
                    value={password}
                    leftIcon={require('../../img/icons/ic_lock.png')}
                    leftIconStyles={{
                      width: passIc.width,
                      height: passIc.height
                    }}
                    secureTextEntry={true}/>
                  <Text style={styles.errorTextStyle}>
                    {error}
                  </Text>
                </Form>
                <View style={styles.btnCont}>
                  <PrimeButton
                    navigation={this.props.navigation}
                    setting={signInBtnSetting}
                    btnText='SIGN IN'
                    onPressButton={this.loginUser.bind(this)}
                  />
                  <PrimeButton
                    navigation={this.props.navigation}
                    setting={signUpBtnSetting}
                    btnText='Login with Facebook'
                    onPressButton={this.props.onPressFacebook}
                  />
                </View>
                <View style={{paddingBottom: responsiveHeight(11.54)}}>
                  <Text black normal regular
                    style={{textDecorationLine: 'underline'}}
                    onPress={this.props.onPressForgotPass}
                  >
                    Forgot Password?
                  </Text>
                </View>
              </View>
            </View>
            <View style={[
              styles.bottomCont,
              signinBottomHeight > (bottomTxtHeight + spaceVertical.semiSmall)
                ? {height: signinBottomHeight, paddingBottom: spaceVertical.semiSmall}
                : {marginBottom: spaceVertical.semiSmall}
            ]}>
              <Text darkGray normal regular
                style={styles.bottomTxt}
                onPress={() => this.props.navigation.navigate('HomeScreen')}
              >
                Sign In as Guest
              </Text>
            </View>
          </ScrollView>
          {/* sign in form end here */}

          {/* sign up form start here */}
          <ScrollView heading='SIGN UP'>
            <View onLayout={this.onSignupLayout.bind(this)}>
              <SignUp
                isLoading={false}
                onPressSignUp={this.handleSignUpWithEmailAndPassword.bind(this)}
                onPressSignIn={() => this.tabView.goToPage(0)}
              />
            </View>
          </ScrollView>
          {/* sign up form end here */}
        </Tabs>
      </View>
    );
  }

  /**
   * Get size of logo container
   */
  onLogoContLayout = (e) => {
    this.setState({
      logoContLayout: {
        width: e.nativeEvent.layout.width,
        height: e.nativeEvent.layout.height,
      }
    });
  }

  /**
   * Get size of sign in form
   */
  onSigninLayout = (e) => {
    this.setState({
      signinLayout: {
        width: e.nativeEvent.layout.width,
        height: e.nativeEvent.layout.height,
      }
    });
  }

  /**
   * Get size of sign up form
   */
  onSignupLayout = (e) => {
    this.setState({
      signupLayout: {
        width: e.nativeEvent.layout.width,
        height: e.nativeEvent.layout.height,
      }
    });
  }

  /**
   * Handle when click sign in facebook
   * Login facebook get token
   */
  handleSignInFacebook() {
    this.props.navigation.navigate('MainDrawer');
  }

  /**
   * Handle when click sign in google
   * Login google get idToken, accessToken
   */
  handleSignInGoogle() {
    this.props.navigation.navigate('MainDrawer');
  }

  /**
   * Handle sign in with email and password
   *
   * @param {String} email
   * @param {String} password
   */
  handleSignInWithEmailAndPassword(email, password) {
    this.props.navigation.navigate('MainDrawer');
  }

  /**
   * Handle sign up with email and password
   *
   * @param {String} email
   * @param {String} password
   */
  handleSignUpWithEmailAndPassword(email, password) {
    this.props.navigation.navigate('HomeScreen');
  }
}

const styles = StyleSheet.create({
  logo: {
    paddingTop: NAV_HEIGHT + STATUSBAR_HEIGHT,
    paddingBottom: responsiveHeight(10.64),
    marginHorizontal: marginHorizontal.large,
  },
  bottomCont: {
    justifyContent: 'flex-end',
  },
  bottomTxt: {
    textAlign: 'center',
    textDecorationLine: 'underline'
  },
  container: {
    marginHorizontal: marginHorizontal.large,
  },
  btnCont: {
    alignItems: 'center',
    paddingBottom: spaceVertical.semiSmall,
  },
});

LoginScreen.propTypes = {
  navigation: PropTypes.any,
};