import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import Label from '../components/Label';
import { BACKEND_URL } from './config.js'
import {
  StyleSheet,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Linking,
  AsyncStorage,
  View,
  ActivityIndicator
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import { Icon } from 'react-native-elements'
import SvgUri from 'react-native-svg-uri';

export default class LoginForm extends Component {

  constructor(props) {
      super(props);
      this.state = {
        username : '',
        email : '',
        user_pass : '',
        contact : '',
        signUpStatus: false
      }
      this.registerUser = this.registerUser.bind(this)
    }

  registerUser = async () => {
    this.setState({
      signUpStatus: true
    })
    const response = await fetch(BACKEND_URL+'/api/user/register_user?username='+this.state.username+'&email='+this.state.email+'&user_pass='+this.state.user_pass+'&contact='+this.state.contact+'&insecure=cool',{
    method : 'POST',
      headers : {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json',
      }
    })
    const data = await response.json()
    if(data.status === "ok"){
      this.setState({
        signUpStatus: false
      })
      await AsyncStorage.setItem('cokkie', data.cookie);
      this.props.navigation.navigate('Home');
    }

    if(data.status == "error"){
      this.setState({
        signUpStatus: false
      })
      alert(data.error)
    }
  }

  render() {
    const { navigate } = this.props.navigation;

    return(
        <ScrollView style={styles.main}>
          {(this.state.signUpStatus)
            ? <View style={styles.overlay}>
                <ActivityIndicator size="large" color="#fff" />
              </View>
            : null
          }
          <View style={styles.box}>
          <View style={styles.container}>
            <View style={{alignSelf: 'center'}}>
              <Image source={require('../Image/logo.png')} style={styles.imageStyle} />
            </View>
            </View>
            <View style={styles.loginBox}>
                <View style={styles.loginContainer}>
                <View style={{padding:5}}>
                   <SvgUri width="200" height="200" source={require('../Image/user.svg')} />
                </View>
                <View style={styles.wrapperStyle}>
                <Label text="USER NAME" />
                <TextInput
                style={styles.textInput}
                underlineColorAndroid='transparent'
                onChangeText={ (username => this.setState({username})) }
                placeholder="Laura wilson"
                placeholderTextColor="#FFFFFF"
                />
                </View>
                </View>
                <View style={styles.loginContainer}>
                <View style={{padding:5}}>
                    <SvgUri width="200" height="200" source={require('../Image/password.svg')} />
                </View>
                <View style={styles.wrapperStyle}>
                <Label text="PASSWORD" />
                <TextInput
                style={styles.textInput}
                underlineColorAndroid='transparent'
                onChangeText={ (user_pass => this.setState({user_pass})) }
                placeholder="********"
                placeholderTextColor="#FFFFFF"
                />
                </View>
                </View>
                <View style={styles.loginContainer}>
                <View style={{padding:5}}>
                    <SvgUri width="200" height="200" source={require('../Image/email.svg')} />
                </View>
                <View style={styles.wrapperStyle}>
                <Label text="EMAIL" />
                <TextInput
                style={styles.textInput}
                underlineColorAndroid='transparent'
                onChangeText={ (email => this.setState({email})) }
                placeholder="Laura wilson"
                placeholderTextColor="#FFFFFF"
                />
                </View>
                </View>
                <View style={styles.loginContainer}>
                <View style={{padding:5}}>
                  <SvgUri width="200" height="200" source={require('../Image/mobile.svg')} />
                </View>
                <View style={styles.wrapperStyle}>
                <Label text="PHONE NUMBER" />
                <TextInput
                    secureTextEntry={true}
                    style={styles.textInput}
                    underlineColorAndroid='transparent'
                    onChangeText={ (contact => this.setState({contact})) }
                    placeholder="+123 456 789"
                    placeholderTextColor="#FFFFFF"
                />
                </View>

                </View>
                <TouchableOpacity
                style={styles.buttonStyle} onPress={() => this.registerUser()}
                >
                  <Text style={styles.textStyle}>Signup</Text>
                </TouchableOpacity>
                <Text style={{color: 'rgba(255, 255, 255, 0.6)',fontSize: 12, textAlign: 'center',paddingTop:10}}>
                Already Member?
                </Text>
                <Text style={{color: 'white', fontWeight: 'bold', marginTop: 5,  textAlign: 'center'}}
                onPress={() => navigate('Login')}>
                Login
                </Text>
                </View>
                </View>
        </ScrollView>
      );
  }
}

const styles = StyleSheet.create({
    main:{
      flex:1,
      backgroundColor: '#0050A1',
    },
    box:{
      flex:1,
      alignItems:'center',
      justifyContent:'center',
      alignSelf:'center'
    },
    ImageStyle: {
      padding: 10,
      margin: 5,
      height: 25,
      width: 25,
      resizeMode : 'stretch',
    },
    label: {
      color: '#fff',
      fontSize: 20
    },
    imageStyle: {
      marginTop: 5,
      height: 66,
      width: 200
    },
    container: {
      margin: 10,
      marginLeft: 0,
      alignContent:'center',
      marginBottom: 50,
      padding: 20
    },
    headerStyle: {
      flexDirection: 'row',
      flex: -1,
      marginRight: 20
    },
    firstHeaderStyle: {
      flexDirection: 'row',
      flex: -1,
      marginTop: 75,
      marginRight: 20
    },
    buttonStyle:{
      alignSelf: 'stretch',
      borderRadius: 27,
      borderWidth: 1,
      margin:25,
      borderColor: '#0086e5',
      backgroundColor:'#0086e5',
      padding:10,
    },
    textStyle:{
      color: 'white',
      fontSize: 18,
      textAlign:'center',
      fontWeight: 'bold',
    },
    textInput: {
      height: 40,
      fontSize: 18,
      color:'rgba(255, 255, 255, 0.6)',
      width: '100%',
      fontFamily: 'system',
      borderBottomWidth:0.8,
      borderBottomColor:'#fff'
    },
    overlay: {
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0, 80, 161, 0.8)',
      position: 'absolute',
      top: 0,
      left: 0,
      zIndex: 999,
      justifyContent: 'space-around'
    },
    //added styles

    loginBox:{
        flex:0.7,
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        margin:10,
    },
    loginContainer:{
        flexDirection: 'row',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        marginTop:0,
        marginBottom:5,
        paddingTop:5,
        paddingBottom:5
    },
    wrapperStyle:{
        flexDirection: 'column',
        flex:3,
        justifyContent:'center',
        paddingLeft:5,
        paddingBottom:5,
        marginTop:5,
        marginBottom:5,
    }
  });