//Login component

import React from 'react';
import { View,Image, Text,ToastAndroid, StyleSheet, TextInput,Alert, AsyncStorage,TouchableOpacity,ActivityIndicator,Linking } from 'react-native';
import { Item,Container,Content,Form,Input,Icon,Button } from 'native-base';
import { Font } from 'expo';
import Dimensions from 'Dimensions';
import { LinearGradient } from 'expo';
//import startMainTabs from './Main';



//width-height of device
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;

export default class Login extends React.Component {

  constructor(props) {
    super(props);


    this.state = {
      username: 'api',
      password: 'api1234',
      pin: '1267',
      loginRight: false,
      click: false,
      errors: '',
      allData: false,
    };

    //await AsyncStorage.removeItem('user');
  }
  onLostPassPress() {

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

    this.setState({
      click: true,
    });


    _storeData = async (user) => {
        try {
          //await AsyncStorage.removeItem('user');
          await AsyncStorage.setItem('user', JSON.stringify(user));
        } catch (error) {
          // Error saving data
        }
      }


    //method for API call
    const checkLoginData = async () => {
      await fetch('http://192.168.0.108/login/', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          user: this.state.username,
          password: this.state.password,
          pin: this.state.pin,
        }),
      }).then((response) => response.json())
        .then((json) => {
          //alert(json);
          // api response user?
          if(json.user != null)
          {
            this.setState({
              loginRight: true,

            });
            var obj = {
              id: json.user.id,
              lastname: json.user.lastname,
              name: json.user.name,
              email: json.user.email,
              user: json.user.user,
            };
            _storeData(obj);
            //wait 1sec before open Main screen
             //navigate("Main",{user: JSON.stringify(obj)});
            setTimeout(() => {
              navigate("Main",{user: JSON.stringify(obj)});
              /*navigate('Main', {} , {
                type: 'Navigate',
                routeName: 'Main',
                action: {
                  type: 'Navigate',
                  routeName: 'Domov',
                  params: {user: JSON.stringify(obj)}
                }
              }); */

              //set state
              this.setState({
                loginRight: false,
                click: false,
              });

              //clear fields after succesfull login
              this.refs.textInputUser._root.clear();
              this.refs.textInputPass._root.clear();
              this.refs.textInputPin._root.clear();
            },1300);



            //navigate("Main", {ime: user});

          }
          else if (json.errors)
          {
            //if errors
            //alert(json.errors);
            this.setState({
              loginRight: false,
              errors: json.errors,

            });

            //console.log(this.refs.textInputPass._root);
            this.refs.textInputPass._root.clear();
            this.refs.textInputPin._root.clear();
            //this.refs.textInputPass.clear();
            //this.textInputPin.clear();

          }
        })
        .catch((error) => {
          console.error(error);
          this.setState({
            loginRight: false,
          });
        });
    };

    //check if input is set(not empty) && api call
    if(this.state.username != '' && this.state.password != '' && this.state.pin != '') {
      this.setState({
        allData: true,
      });
      checkLoginData();
    }

  }
  render() {
    return (
      <LinearGradient
          colors={["#48BFD3", "#269BB9","#087CA3"]}
          start={[1,0]}
          end={[0,1]}
          //colors={["#087CA3","#269BB9","#48BFD3"]}
          style={{flex: 1}}>

          <View style={styles.container}>


           <Text style={styles.appName}>eGŠ Učitelj</Text>


          {
            !this.state.loginRight && this.state.click && this.state.allData &&

            <View style={styles.errorMsg}>
              <Text style={styles.errorHeader}>{this.state.errors}</Text>
              <View style={styles.line}/>
              <Text>
               {`Popravite svoj vnos in poskusite\nznova! `}
              </Text>
            </View>
          }
              <Item>
                <Icon active name='person' style={{fontSize: 20, color: '#FFF'}}/>
                <Input
                  placeholder='Uporabniško ime'
                  placeholderTextColor="rgba(255,255,255,0.5)"
                  value={this.state.username}
                  onChangeText={(username) => this.setState({ username })}
                  ref='textInputUser'
                  //ref={input => {this.textInputUsr = input}}
                  //getRef={(input) => this.textInputUsr = input}

                  style={styles.input} />

              </Item>

              {
                !this.state.username && this.state.click && !this.state.allData && <Text style={styles.txtIfEmpty}>Vnesite uporabniško ime</Text>
              }


              <Item>
                <Icon active name='key' style={{fontSize: 20, color: '#FFF'}} />
                <Input
                  value={this.state.password}
                  onChangeText={(password) => this.setState({ password })}
                  placeholder={'Geslo'}
                  placeholderTextColor="rgba(255,255,255,0.5)"
                  secureTextEntry={true}
                  underlineColorAndroid="transparent"
                  //ref={input => {this.textInputPass = input}}
                  //getRef={(input) => this.textInputPass = input}
                  ref='textInputPass'
                  style={styles.input}/>
              </Item>

              {
                !this.state.password && this.state.click && !this.state.allData && <Text style={styles.txtIfEmpty}>Vnesite geslo</Text>
              }

              <Item>
                <Icon active name='lock' style={{fontSize: 20, color: '#FFF'}}/>
                <Input
                  value={this.state.pin}
                  onChangeText={(pin) => this.setState({ pin })}
                  placeholder={'Pin'}
                  placeholderTextColor="rgba(255,255,255,0.5)"
                  //placeholderStyle={{opacity: 0.5}}
                  keyboardType="numeric"
                  secureTextEntry={true}
                  underlineColorAndroid="transparent"
                  //ref={input => {this.textInputPin = input}}
                  //getRef={(input) => this.textInputPin = input}
                  ref='textInputPin'
                  style={styles.input}/>
              </Item>

              {
                !this.state.pin && this.state.click && !this.state.allData && <Text style={styles.txtIfEmpty}>Vnesite pin</Text>
              }


              {
                !this.state.loginRight &&
                <TouchableOpacity
                        style={styles.btn}
                        color='#033D51'
                        onPress={this.onLogin.bind(this)}
                        //onPress={() => this.props.navigation.navigate("Main",{user: 'neki'})}
                    >
                    <Text style={styles.txtBtn}>VPIS</Text>
                </TouchableOpacity> ||
                 <ActivityIndicator size="large" color="#033D51" style={{marginTop: 30, height: 30}}/>
              }



            <TouchableOpacity
                        onPress={ () => {Linking.openURL('https://www.eglasbenasola.si/login/forgotten_password')}}
                    >
                    <Text style={styles.txtLost}>Ste pozabili geslo?</Text>
            </TouchableOpacity>


         </View>

    </LinearGradient>


    );
  }
}

//style for this screen
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 30,
    paddingRight: 30,

  },
  errorMsg: {
    position: 'absolute',
    top: '22%',
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowOffset: {
      width: 5,
      height: 5
    },
    shadowOpacity: 8,
    shadowColor: '#000'
  },
  errorHeader: {
    fontSize: 20,
    fontWeight: 'bold',
  },
    line: {
    borderBottomColor: 'black',
    borderBottomWidth: 2,
    marginBottom: 10,
  },
  appName: {
    paddingTop: 25,
    paddingBottom: 25,
    fontSize: 24,
    fontWeight: 'bold',
    color: '#FFF',
  },
  txtIfEmpty: {
    justifyContent: 'flex-start',
    alignSelf: 'flex-start',
  },
  input: {
    color: '#FFF',

  },
  txtBtn: {
    fontSize: 22,
    textAlign: 'center',
    fontWeight:'bold',
    justifyContent: 'center',
    textAlign: 'center',
    color: '#FFF',
  },
  txtLost: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#FFF',
    paddingTop: 15,
    textDecorationLine: 'underline',
    textDecorationStyle: 'double',
    textDecorationColor: '#FFF',
    justifyContent: 'center',

  },
  btn: {
    marginTop: 30,
    height: 55.6,
    //flexDirection: 'row',
    backgroundColor: '#033D51',
    justifyContent: 'center',
    borderRadius: 15,
    width: 300,
    shadowOffset: {
      width: 3,
      height: 3,
    },
    shadowRadius: 8,

  },

});


//Main component
import React from 'react';
import { BackHandler,
    ToastAndroid,Text, View,StyleSheet,TouchableOpacity,Button,ScrollView,AsyncStorage,Alert } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import TicketDiaryNews from '../../components/ticketMainScreen';



export default class HomeScreen extends React.Component {





    constructor(props) {
        super(props);

        this.state = {
            user: this.retrieveItem('user'),
        }

        alert(JSON.stringify(this.props.navigation.state));

    }

    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    }

    handleBackButton() {
        ToastAndroid.show('Back button is pressed', ToastAndroid.SHORT);
        return true;
    }

   async retrieveItem(key) {
    try {
      const retrievedItem =  await AsyncStorage.getItem(key);
      const item = JSON.parse(retrievedItem);
      return item;
    } catch (error) {
      console.log(error.message);
    }
    return
  }


    render() {
            return (
                <View style={styles.background}>
                  <View style={styles.mainContent}>
                  <ScrollView>

                    <View style={styles.header}>
                        <View style={styles.idSchool}>
                            <Text style={styles.textStyle}>Ime sole </Text>
                        </View>
                        <View  style={styles.headerYear}>
                            <Text style={styles.textStyle}>Solsko leto</Text>
                        </View>
                    </View>
                    <View style={styles.line} />


                    <TicketDiaryNews navigation={this.props.navigation}/>

                    <TicketDiaryNews navigation={this.props.navigation}/>

                    <TicketDiaryNews navigation={this.props.navigation}/>

                    </ScrollView>

                  </View>
                </View>


            );


  }
}

const styles = StyleSheet.create({
    background: {
        flex:1,
        backgroundColor: '#269BB9',
    },
    mainContent: {
        flex: 1,
        borderRadius: 15,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        shadowOffset: {
            width: 3,
            height: 3,
        },
        shadowRadius: 8,
        backgroundColor: 'white',
    },
    header: {
        marginTop: 15,
        marginLeft: 30,
        marginRight: 30,
        flexDirection: 'row',

    },
    idSchool: {
        alignSelf: 'flex-start',
    },
    headerYear: {
        position:'absolute',
        right: 0,

    },
    textStyle: {
        fontSize: 17,
        fontWeight: '600', //semi bold
    },
    line: {
        marginRight: 30,
        marginLeft: 30,
        borderBottomColor: 'black',
        borderBottomWidth: 2,
    },

});