import { Stack, useNavigation } from 'expo-router';
import { ImageBackground, StyleSheet, Button, TextInput, SafeAreaView, Text, View ,Image,Alert } from 'react-native';
import { useEffect,useState } from 'react';
import {
    GoogleSignin,
    GoogleSigninButton,
} from "@react-native-google-signin/google-signin";

const Home =()=> {
    const [username, onChangeUsername] = useState('');
    const [password, onChangePassword] = useState('');

    const image = {uri: 'https://rader.app/assets/images/app/home.jpg'};

    useEffect(() => {
        GoogleSignin.configure({
            webClientId:
                "828012052860-rq3m5ppckbmtc7vfjp3mau0s6p8h9mgm.apps.googleusercontent.com",
        });
    }, []);

    //https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1/userlogin

    return (
        <SafeAreaView style={styles.container}>
          <ImageBackground source={image} resizeMode="cover" style={styles.image}>
              <View style={styles.login_box}>
                  <Image
                      style={styles.tinyLogo}
                      source={{
                          uri: 'https://reactnative.dev/img/tiny_logo.png',
                      }} />
                  <Text style={styles.lbl}>Connect you care</Text>
                  <TextInput
                      editable
                      maxLength={40}
                      value={username}
                      onChangeText={onChangeUsername}
                      style={styles.textInp}
                  />

                  <TextInput
                      editable
                      maxLength={40}
                      value={password}
                      secureTextEntry={true}
                      onChangeText={onChangePassword}
                      style={styles.textInp}
                  />

                  <Button
                      title="Log in"
                      style={styles.loginButton}
                      onPress={() => Alert.alert('Button with adjusted color pressed')}
                  />
              </View>

          </ImageBackground>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'aliceblue'
    },
    lbl:{
        fontWeight: 800,
        color:'darkblue',
        textAlign: 'center'
    },
    login_box: {
        backgroundColor: 'white',
        maxWidth: 480,
        minWidth: 350,
        margin: 'auto',
        borderRadius: 10,
        padding: 15,
        gap:'10px'
    },
    loginButton:{
        borderRadius: 5,
        color:'red',
        backgroundColor: '#f194ff'
    },
    tinyLogo: {
        width: 50,
        height: 50,
        margin:'auto'
    },
    textInp:{
        padding: '10px',
        backgroundColor: 'whitesmoke',
        borderRadius: 5,
        height: 40,
        margin: 12,
        borderWidth: 1,
    },
    image: {
        flex: 1,
        justifyContent: 'center',
    },
    text: {
        color: 'white',
        lineHeight: '84px',
        fontWeight: 'bold',
        textAlign: 'center',
        backgroundColor: '#000000c0',
    },
});
export default Home;