import React from 'react';
import {
  Button,
  DrawerLayoutAndroid,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet
} from 'react-native';

import {NavigationContainer} from '@react-navigation/native'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {createStackNavigator} from '@react-navigation/stack'
import axios from 'axios'
import {createDrawerNavigator} from '@react-navigation/drawer'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { useState } from 'react';
import { color } from 'react-native-reanimated';

// components
import LoginFunc from './components/LoginFunc'
import Home from './components/Home'
import LoginTextbox from './components/Textbox'
import Signup from './components/Signup'
import FlatList3 from './components/FlatList'
import FlatList_Api from './components/FlatList_Api'
import Class_comp from './components/Class_comp';
import Func_comp from './components/Func_comp'
import FormValidation from './components/FormValidation';

// const tab = createBottomTabNavigator()
// const drawer = createDrawerNavigator()
const stack = createStackNavigator()

 
function App(){  
    return(
       <NavigationContainer>
         <stack.Navigator>
           <stack.Screen 
           options={{headerTintColor:'white'
          ,headerStyle:{
              backgroundColor:'black'
          }}}  
          name="Login" component={Login}/>
           <stack.Screen name="Home" component={Home}/>
           <stack.Screen name="Signup" component={Signup}/>
           <stack.Screen name="FlatList3" component={FlatList3}/>
           <stack.Screen name="FlatList_Api" component={FlatList_Api}/>
           <stack.Screen name="FormValidate" component={FormValidation}/>
         </stack.Navigator>
       </NavigationContainer>
    )
}

const Login = (props, route) =>
{
  const [state, stateupt] = useState({cardnum:'', pass:''})
  const [Username, SetName] = useState('')
  const [Password, Setpass] = useState('')
  
const LoginFunc = () => {

  var cardno = state.cardnum
  var password = state.pass
  
  if(cardno.length == 0 || password.length == 0)
  {
    alert("Required Fields Missing!")
  }else 
  {

  //  Login with axios

    var Data =
    {
      Username: cardno,
      Password: password
    }
   
   let URL1 = 'http://www.smartpaygs.com:87/Api/Users/Authentication'
   axios.post(URL1, Data)
  .then(function (response) {
   if(response.status == 200)
   {
       props.navigation.push('Home',response.data)
   }
  })
  .catch(function (error) {
    alert(error.response.data)
  });

  //   Login With PHP API

  //   let URL = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
  //   var headers = {
  //       'Accept' : 'application/json',
  //       'Content-Type': 'application.json' 
  //   }
  //   var Data =
  //   {
  //     cardno: cardno,
  //     password: password
  //   }
  //   fetch(URL, {
  //     method: 'POST',
  //     headers: headers,
  //     body: JSON.stringify(Data)
  //   })
  //   .then((response)=> response.json())
  //   .then((response) => 
  //   {
  //     alert(response[0].Message)
  //     if (response[0].Message =='success') {
        
  //        props.navigation.navigate('Home')
  //     }else{
           
  //     }
  // })
  //   .catch(error =>
  //     {
  //       alert("Error" + error)
  //     }
  //   )

//  Through Fetch Api

 // let URL = 'http://www.smartpaygs.com:87/Api/Users/Authentication'
 // let URL = 'https://reqres.in/api/register'
 
    // let Data =
    // {
    //    Username: cardno,
    //    Password: password
    //  //  Username,
    //  //  Password
    // }
    // console.warn(Data)
    // fetch(URL, {
    //   method: 'POST',
    //   headers: {
    //      Accept: 'application/json',
    //     'Content-Type': 'application.json'
    //   },
    //   body: JSON.stringify(
      //{
      //    'Username' : '1102000310000001',
      //    'Password' : '123123'
      // } 
      // Data
    //   )
    // })
    // .then((response)=> response.json())
    // .then((response) => 
    // {
    //   console.warn(response)
      // alert(response.EmbossLine)
      // if (response[0].Message =='success') {
        
      //    props.navigation.navigate('Home')
      // }else{
           
      // }
  // })
  //   .catch(error =>
  //     {
  //       alert("Error" + error)
  //     }
  //   )
  }
 }

  return(
      <View style={{marginTop:40}}>
        <LoginTextbox 
          placeholder='Enter card Number'
          keyboardType='numeric'
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.cardnum /*Username*/}
           onChangeText={(e) => stateupt({...state, cardnum:e})
           //SetName(e)
          }
        />
         <LoginTextbox 
          placeholder='Enter Your Password'
          secureTextEntry={true}
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.pass /*Password*/}
          onChangeText={(e) => stateupt({...state,pass:e})
          //Setpass(e)
        }
        />
        <Text>{state.cardnum}</Text>
        <Text>{state.pass}</Text>
       {/* <Button title="Login" onPress={()=> {LoginPress2()} /*(props.navigation.navigate('Home')}/> */}
       <TouchableOpacity style={styles.btn} activeOpacity={0.8} onPress={()=>{LoginFunc()}}>
           <Text style={styles.btnText}>Login</Text>
       </TouchableOpacity> 
       <Text onPress={() => {props.navigation.push('Signup',state.cardnum)}} style={{marginTop:30, marginLeft: 30}}>Sign Up</Text>
       {/* const regular_icon_btn = <FontAwesome5.Button name={'comments'} />; */}
      </View>
  )
}

class Class_comp1 extends React.Component
{
    render()
    {
        return(
            <View>
                <Text style={{fontSize:60,}}>From Class_comp</Text>
                <Button width='40' title="Btn from class" onPress={()=> alert("from class comp")}/>
            </View>
        )
    }
}

const styles = StyleSheet.create
({
  btnFormValid:
  {
    marginTop: 10,
    backgroundColor: "purple",
    height: 50,
    width: 130,
    justifyContent:'center',
    alignItems:'center',
    alignSelf:'center'
  },
    btnAPi:
    {
      marginTop: 10,
      backgroundColor: "red",
      height: 50,
      width: 70,
      justifyContent:'center',
      alignItems:'center',
      alignSelf:'center'
    },
    btn:{
        marginTop: 10,
        backgroundColor: "maroon",
        height: 50,
        width: 70,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center'
    },
    btnText:{
        color: 'white',
        fontSize: 15
    }
})
export default App;