import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import {Input} from 'nachos-ui'

import MainMenu from './mainMenu'

var logo = require('./assets/download.jpg')
var APP_VERSION = 4



export default class LoginPage extends React.Component {
    state = {
      username: '',
      password: '',
      usernameError: false,
      passwordError: false
      //value: null

    }
    loginPressed = () =>{
      this.setState({usernameError:false,passwordError:false})
      if(!this.state.username){
        this.setState({usernameError: true})
      }
      if(!this.state.password){
        this.setState({passwordError: true})
      }
      if(this.state.password && this.state.username)
      {
        alert(this.state.username + " " + this.state.password )
        {()=> this.setState({currentPage: 'mainMenu'})}

     }
    }



    render() {
      switch(this.state.currentPage){
        case 'mainMenu':
          return<MainMenu/>
          break;
        case 'loginPage':
          return<App/>
          break;
      }


      if(this.state.currentPage==='mainMenu'){
        return(<MainMenu/>)
      }

      return (
        <View
        style={styles.container}
        >
          <View
          style={styles.logoStyle}

          >
           <Image
              source={logo}
          />
          </View>
          <View >
              <Input
              //inputStyle={styles.textInputBox}
              status={this.state.usernameError ? "warn" : null}
              value= {this.state.username}
              placeholder='username'
              onChangeText={(username) => this.setState({username})}
              />
              <Input
              status={this.state.passwordError ? "warn" : null}
              //inputStyle={styles.textInputBox}
              value= {this.state.password}
              placeholder='password' secureTextEntry ={true}
              onChangeText={(password) => this.setState({password})}
              />
          </View>
          <View>
            <Button
              title='LOGIN'
              onPress={this.loginPressed}
              style={{margin: 50}}
            />
          </View>
            <View style={styles.versionCd}>
              <Text>versi {APP_VERSION}</Text>
            </View>
        </View>
      );
    }
  }


  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      justifyContent: 'center',
    },
     textInputBox:{
    //   backgroundColor:'grey',
    //   borderColor:'black',
    //   color: 'black',
      height: 40,
      paddingTop: 5
      //width:150
      //flex:2
    },
    logoStyle:{
      width: 75,
      height:75,
      //flex:1,
      margin:50,
      //alignItems:'center',
      justifyContent:'center',
      paddingHorizontal: 25,
      paddingTop: 10
    },
     versionCd: {
      //justifyContent:'center',
      //alignItem:'center',
      paddingHorizontal: 155,
      //paddingEnd: 75,
      paddingTop: 100
     }

  });