import {View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity, Alert} from "react-native";
import React from "react";
import images from "@/constants/images";
import icons from "@/constants/icons";
import {login} from "@/lib/appwrite";
import {useGlobalContext} from "@/lib/globalProvider";
import {Redirect} from "expo-router";

const SignIn = () => {
    const {refetch, loading, isLoggedIn} = useGlobalContext();
    if(!loading && isLoggedIn) return <Redirect href={"/"}/>;
    const handleLogin = async () => {
        const result = await login();
        if (result) {
            await  refetch();
            console.log('logon successful');
        } else {
            Alert.alert('Login failed')
        }
    }
    return (
    <SafeAreaView className="bg-white h-full">
      <ScrollView contentContainerClassName="h-full">
          <Image source={images.collage} className="w-full h-1/2" resizeMode="contain"/>
          <View className={"px-10"}>
              <Text className={"text-center text-gray-400 font-bold mb-32"}>Добредојдобте во Mobile.mk</Text>
              <Text className={"text-2xl text-center text-gray-500"}>
                    Поблиску до вашиот {"\n"}
                </Text>
              <Text className={"text-xl text-blue-400 text-center mt-3 mb-10 capitalize"}>идеален автомобил</Text>
              <TouchableOpacity onPress={handleLogin} className={"bg-white shadow-md shadow-zinc-400 rounded-full py-4 items-center"}>
                  <View className={"flex flex-row items-center"}>
                  <Image source={icons.google} className={"w-5 h-5"}
                  resizeMode="contain"
                  />
                      <Text className={"text-gray-800 ml-4"}>Продолжи со Google</Text>
                  </View>
              </TouchableOpacity>
          </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default SignIn;