import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    KeyboardAvoidingView,
    TouchableOpacity,
    AsyncStorage,
    ImageBackground,
    Dimensions,
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

const { width: WIDTH } = Dimensions.get('window')

export default class Login extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            username: '',
            password: '',
        }
    }

    componentDidMount(){
        this._loadInitialState().done();
    }

    _loadInitialState = async () => {
        var value = await AsyncStorage.getItem('user');
        if (value !== null){
          this.props.navigation.navigate('Profile');
        }
    }


  render() {
    return (
      //<ImageBackground source={require('././assets/splash.png')}>
        <KeyboardAvoidingView behavior = 'padding' style = {styles.wrapper}>
            <View style ={styles.container}>

                <Text style= {styles.header}> LOGGA IN </Text>

                <View style ={styles.inpuContainer}>
                <Icon name={'ios-person'} size ={28} color = {'rgba(255, 255, 255, 0.7)'}
                style={styles.inputIcon}/>
              <TextInput
                    style={styles.textInput}
                    placeholder = 'Username'
                    placeholderTextColor={'rgba(255, 255, 255, 0.7)'}
                    underlineColorAndroid='transparent'
                    onChangeText={ (username) => this.setState({username}) }

                />
                </View>

                <View style ={styles.inpuContainer}>
                <Icon name={'ios-lock'} size ={28} color = {'rgba(255, 255, 255, 0.7)'}
                style={styles.inputIcon}/>
               <TextInput
                    style={styles.textInput}
                    placeholder = 'Password'
                    placeholderTextColor={'rgba(255, 255, 255, 0.7)'}
                    onChangeText={ (password) => this.setState({password}) }
                    secureTextEntry={true} underlineColorAndroid='transparent'
               />
               <TouchableOpacity style={styles.btnEye}>
                    <Icon name={'ios-eye'} size={26} color={'rgba(255, 255, 255, 0.7)'}/>
                </TouchableOpacity>
              </View>

               <TouchableOpacity
                  style={styles.btn}
                  onPress={this.login}>
                  <Text style={styles.text}>Log in</Text>
                </TouchableOpacity>

            </View>

        </KeyboardAvoidingView>
     // </ImageBackground>
    );
  }

  login = () => {



      fetch('http://192.168.10.228:3000/users', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON  .stringify({
            username: this.state.username,
            password: this.state.password,
        })
  })

  .then((response) => response.json())
  .then((res) => {

      if(res.success == true){
        AsyncStorage.setItem('user', res.user);
        this.props.navigation.navigate('Profile');
      }

      else{
        alert(res.message);
      }
  })
  .done();
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  backgroundContainer: {
    flex: 1,
    width: null,
    height: null,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2896d3',
    paddingLeft: 40,
    paddingRight: 40,

  },
  inpuContainer: {
    marginTop: 10,
  },
  header: {
    fontSize: 24,
    marginBottom: 60,
    color: '#fff',
    fontWeight: 'bold',
  },
  textInput: {
    width: WIDTH -55,
    height: 45,
    borderRadius: 25,
    fontSize: 16,
    paddingLeft: 45,
    backgroundColor: 'rgba(0, 0, 0, 0.35)',
    color: 'rgba(255, 255, 255, 0.7)',
    marginHorizontal: 25,
  },
  inputIcon: {
    position: 'absolute',
    top: 8,
    left: 37,


  },
  btnEye: {
    position: 'absolute',
    top: 8,
    right: 37,
  },
  text: {
    color: 'rgba(255, 255, 255, 0.7)',
    fontSize: 16,
    textAlign: 'center',
  },
  btn: {
    width: WIDTH -55,
    height: 45,
    borderRadius: 25,
    backgroundColor: '#75D161',
    justifyContent: 'center',
    marginTop: 20,
  }
});