import React, { Component } from 'react';
import { StyleSheet, Text, View, Image,KeyboardAvoidingView,TouchableOpacity, AsyncStorage, Keyboard } from 'react-native';
import { Container, Header, Tab, Tabs, StyleProvider, TabHeading, Icon, Form, Item, Label, Input, Button,Toast } from 'native-base';


import getTheme from '../native-base-theme/components';
import material from '../native-base-theme/variables/material';

export default class Login extends Component {


  constructor(props) {
    super(props);

    this.state = {
      username:'',
      showToast: false,
      password:''

    };
  }

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

  _loadInitialState = async () => {
    var value = await AsyncStorage.getItem('userid');

    if(value !== null){
      this.props.navigation.navigate('Dashboard')
    }
  }

 static navigationOptions = { header: null }
  render() {

  var {navigate} = this.props.navigation;
    return (

  <StyleProvider style={getTheme(material)}>
       <KeyboardAvoidingView behavior="padding"  style={styles.container}>
        <View style={styles.slider}>
           <Image style={styles.images} source={require('../img/newbg.png')} />
        </View>
        <View style={styles.getstarted}>

         <Form>
            <Item>
              <Input
              returnKeyType="next"
               keyboardType="email-address"
               autoCapitalize="none"
               autoCorrect={false}
               onChangeText= {username => this.setState({username })}
               placeholder="Email or Username" />
            </Item>
            <Item last>
              <Input
              secureTextEntry
              returnKeyType="go"

               onChangeText= {password => this.setState({password })}
               placeholder="Password" />
            </Item>

           <View style={styles.wrapbut}>

            <Button block onPress={this.login} >
            <Text style={styles.butcolor}>LOGIN</Text>
          </Button>
           <Button transparent style={styles.forgbut}>
            <Text style={styles.forgot}>FORGOT PASSWORD ?</Text>
          </Button>
           <Button block success onPress={() => navigate("Register")}>
            <Text style={styles.butcolor}>CREATE NEW DOOKITA ACCOUNT</Text>
          </Button>
          </View>
          </Form>


        </View>
      </KeyboardAvoidingView>
     </StyleProvider>
    );
  }

  login =() =>{

    Keyboard.dismiss();

    fetch('http://native.codefest.com.ng/api/postlogin',{
      method: 'post',
      headers:{
        'Accepts': 'application/json',
        'Content-Type':'application/json',
      },
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password,
        throttle: 'Patients'
      })
    })

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


      if(res.status === true){

        let myarray={
          id: res.logintoken,
          fname: res.fname,
          lname: res.lname
        }
        AsyncStorage.setItem('userid', JSON.stringify(myarray));
        this.props.navigation.navigate('Dashboard');
      }else{

        Toast.show({
              text: res.status,
              position: 'bottom',
              buttonText: 'Okay'
            });
      }


    }).done();


  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  slider:{
    flex: 2,
  },
  getstarted:{
    flex:3,
    backgroundColor: '#fff',
    paddingTop: 25,
    paddingHorizontal: 25,



  },
  images:{
    alignItems:'center',
    justifyContent: 'center',
    height: null,
    width: null,
    flexGrow: 1,

},
butcolor:{
  color: '#fff',
  fontSize: 13,
},
forgot:{
  color: '#1464c0',
  fontSize: 12,
  fontWeight: '500',
},
forgbut:{
   alignSelf:  'center',

},
wrapbut:{
   marginTop: 25,
}
});