mobile-darmasaba/app/index.tsx

import { ButtonForm } from "@/components/buttonForm";
import { InputForm } from "@/components/inputForm";
import ModalLoading from "@/components/modalLoading";
import Styles from "@/constants/Styles";
import { apiCheckPhoneLogin } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { Redirect, router } from "expo-router";
import { useState } from "react";
import { Image, Text, ToastAndroid, View } from "react-native";


export default function Index() {
   const [loadingLogin, setLoadingLogin] = useState(false)
   const [phone, setPhone] = useState('')

   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)
      }
   };

   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={setPhone}
               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()
               }}
            />
         </View>
         {
            loadingLogin && <ModalLoading isVisible={true} setVisible={setLoadingLogin} />
         }
      </>
   );
}