import { ScrollView, Text, View, Image , } from "react-native";
import tw from "twrnc";
import InputField from "@/components/InputField";
import { images,icons } from "@/constants";
import { useCallback, useState } from "react";
import CustomButton from "@/components/CustomButton";
import { Link ,useRouter } from "expo-router";
import OAuth from "@/components/OAuth";
import { useSignIn } from "@clerk/clerk-expo";
const SignIn = () => {
    const { signIn, setActive, isLoaded } = useSignIn();
    const router = useRouter(); 
    const [form,setForm]= useState({
        email:"",
        password:"",
    });
    const onSignInPress =useCallback( async () => {
        if (!isLoaded) {
          console.log("Clerk is not loaded yet.");
          return;
        }
        console.log("signIn object:", signIn);
        try {
          const signInAttempt = await signIn.create({
            identifier: form.email,
            password :form.password ,
          })
          if (signInAttempt.status === "complete") {
            await setActive({ session: signInAttempt.createdSessionId })
            console.log("Successfully signed in! Navigating to home...");
            router.push("/(root)/(tabs)/home")
          } else {
            console.error(JSON.stringify(signInAttempt, null, 2))
          }
        } catch (err:any) {
          console.error("Sign-in attempt did not complete:", JSON.stringify(err, null, 2))
        }
    },
        [isLoaded,form.email,form.password]
    );
    return (
        <ScrollView style={tw`"flex-1 bg-white `}>
            <View style={tw`flex-1 bg-white`}>
                <View style={tw`relative w-full h-[250px]`}>
                    <Image
                        source={images.signUpCar}
                        style={tw`z-0 w-full h-[250px]`}
                    />
                    <Text style={tw`text-2xl text-black font-JakartaSemiBold  absolute bottom-5 left-5`}>Welcome☺️</Text>
                </View>
                <View style={tw`p-5`}>
                <InputField 
                label="Email"
                placeholder="Enter your Email"
                icon={icons.email} 
                value={form.email} 
                onChangeText={(value)=>setForm({... form, email:value})}             
                />
                <InputField 
                label="Password"
                placeholder="Enter your Password"
                icon={icons.lock} 
                secureTextEntry={true}
                value={form.password} 
                onChangeText={(value)=>setForm({... form, password:value})}             
                />
                <CustomButton title="Sign In" onPress={onSignInPress} style={tw`mt-10`} />
               <OAuth />
               <Link href="/sign-up" style={tw`text-lg text-center text-general-200  mt-10`}>
               <Text style={tw.style("text-black")}>Don't Have an Account? </Text>
               <Text style={tw.style("text-primary-500")}>Sign Up</Text>
               </Link>
               {  /* Verification Modal */   }
               </View>
            </View>
        </ScrollView>
    );
};
export default SignIn;