signin

/* global require */
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ActivityIndicator,
  Alert
} from 'react-native';
import { NavigationActions } from 'react-navigation';
import { Form } from 'native-base';
import PropTypes from 'prop-types';
import deviceStorage from '../../services/deviceStorage';
import Text from '../../elements/Text';
import PrimeButton from '../../elements/PrimeButton';
import TextInput from '../../elements/TextInput';

import axios from 'axios';

import {Actions} from 'react-native-router-flux';


import {
  btnWidth,
  btnHeight,
  inputHeight,
  marginHorizontal,
  spaceVertical,
  responsiveWidth,
  responsiveHeight,
  colors,
} from '../../styles/variables';

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

export default class SignIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      error: '',
      loading: false
    };
  }

  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) => {
      deviceStorage.saveKey("id_token", response.token);
      this.props.navigation.navigate('HomeScreen',
      {jwt : response.token}
      );
    })
    .catch((error) => {
      console.log(error);
      this.setState({
        error: 'Login Failed',
        loading: false
      });
    });
  }

  render() {
    const { email, password, error, loading } = this.state;
    const { form, section, errorTextStyle } = styles;

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

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

    if (this.props.isLoading) {
      return (
        <View style={[styles.container, styles.loading]}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <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>
    );
  }

  /**
   * Handle when click sign in button
   */
  handleOnPressSignIn() {
    const {
      email,
      password,
    } = this.state;
    let isError = false;
    if (email == '') {
      this.setState({errorEmail: true});
      isError = true;
    }
    if (password == '') {
      this.setState({errorPassword: true});
      isError = true;
    }
    if (isError) {
      return;
    }
    this.props.onPressSignIn(email, password);
  }
}

const styles = StyleSheet.create({
  container: {
    marginHorizontal: marginHorizontal.large,
  },
  form: {
    paddingTop: spaceVertical.small,
    paddingBottom: responsiveHeight(6)
  },
  btnCont: {
    alignItems: 'center',
    paddingBottom: spaceVertical.semiSmall,
  },
  errorTextStyle: {
    alignSelf: 'center',
    fontSize: 18,
    color: 'red'
  }
});

SignIn.propTypes = {
  navigation: PropTypes.any,
  onPressSignIn: PropTypes.func,
  onPressSignUp: PropTypes.func,
  onPressForgotPass: PropTypes.func,
  onPressFacebook: PropTypes.func,
  onPressGoogle: PropTypes.func,
  isLoading: PropTypes.bool,
};