import { NavigationContainer } from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import React from 'react'
import {
    Button,
    Text,
    TextInput,
    TouchableOpacity,
    View,
    StyleSheet
  } from 'react-native';
import Class_comp from './Class_comp';
import Func_comp from './Func_comp'
import FormValidation from './FormValidation';


const Home = (props, {route}) => {
    const data = "some data!!!"
    console.warn(props.route.params);
    const Drawer = createDrawerNavigator();
    return (
      <View style={{marginTop:30}}>
         {/* <Text style={{fontSize:30}}>Functional Component!!!</Text>
         <TextInput placeholder={"Enter Your Name"} onChangeText={(e)=>{console.warn(e)} }/> */}
         {/* <Button title="Logout" onPress={() => props.navigation.navigate('Login')}/> */}
         {/* <Func_comp Data={data} /> */}
         <TouchableOpacity style={styles.btn} activeOpacity={0.8} 
         onPress={()=>{props.navigation.navigate('Login')}}>
             <Text style={styles.btnText}>Logout</Text>
         </TouchableOpacity> 

         <TouchableOpacity style={styles.btn} activeOpacity={0.8} onPress={()=>{props.navigation.navigate('FlatList3')}}>
             <Text style={styles.btnText}>Flat List</Text>
         </TouchableOpacity> 
        
         <TouchableOpacity style={styles.btnAPi} activeOpacity={0.8} onPress={()=>{
           props.navigation.navigate('FlatList_Api')}}>
             <Text style={styles.btnText}>Flat List with Api</Text>
         </TouchableOpacity>
  
         <TouchableOpacity 
         style={styles.btnFormValid}
          activeOpacity={0.8}
          onPress={()=>{
           props.navigation.navigate('FormValidate')}}
           >
             <Text style={styles.btnText}>Form Validation</Text>
         </TouchableOpacity>

         {/* <Text style={{fontSize:40}}>{route.params}</Text> */}
         <Text style={{fontSize:40}}>{props.route.params.EmbossLine}</Text>
         <Text style={{fontSize:40}}>{props.route.params.Embossname}</Text>
         
      </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 Home