import ViewLogin from "@/components/auth/viewLogin";
import ViewVerification from "@/components/auth/viewVerification";
import { useAuthSession } from "@/providers/AuthProvider";
import { Redirect } from "expo-router";
import { useState } from "react";
import { Text } from "react-native";


export default function Index() {
   // const [loadingLogin, setLoadingLogin] = useState(false)
   // const [disableLogin, setDisableLogin] = useState(true)
   const [isValid, setValid] = useState(false)
   const [phone, setPhone] = useState('')
   const [otp, setOtp] = useState(0)

   const { token, isLoading } = useAuthSession()
   if (isLoading) {
      return <Text>Loading...</Text>;
   }

   if (token?.current) {
      return <Redirect href="/home" />;
   }

   // const handleCheckPhone = async () => {
   //    try {
   //       setLoadingLogin(true)
   //       const response = await apiCheckPhoneLogin({ phone: `62${phone}` });
   //       if (response.success) {
   //          const otp = Math.floor(1000 + Math.random() * 9000);
   //          console.log(otp);
   //          // return router.push('/verification')
   //       }
   //       return ToastAndroid.show(response.message, ToastAndroid.SHORT)
   //    } catch (error) {
   //       console.error('Error fetching data:', error);
   //       return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
   //    } finally {
   //       setLoadingLogin(false)
   //    }
   // };

   if (isValid) { return <ViewVerification phone={phone} otp={otp} /> }

   return (
      <>
         {/* <View style={Styles.wrapLogin} >
            <View style={{ alignItems: "center", marginVertical: 50 }}>
               <Image
                  source={require("../assets/images/splash-icon.png")}
                  style={{ width: 130, height: 130 }}
               />
               <Text style={[Styles.textSubtitle]}>PERBEKEL DARMASABA</Text>
            </View>
            <InputForm
               onChange={(val) => {
                  val == "" ? setDisableLogin(true) : setDisableLogin(false)
                  setPhone(val)
               }}
               type="numeric"
               placeholder="XXX-XXX-XXXX"
               round
               itemLeft={<Text>+62</Text>}
               info="Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda." />
            <ButtonForm
               text="MASUK"
               onPress={() => { handleCheckPhone() }}
               disabled={disableLogin}
            />
         </View>
         {
            loadingLogin && <ModalLoading isVisible={true} setVisible={setLoadingLogin} />
         } */}
         <ViewLogin
            onValidate={(val) => {
               setPhone(val.phone)
               setOtp(val.otp)
               setValid(true)
            }}
         />
      </>
   );
}