mobile-darmasaba/components/auth/viewLogin.tsx

import Styles from "@/constants/Styles"
import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { StatusBar } from "expo-status-bar"
import { useState } from "react"
import { Image, Platform, SafeAreaView, View } from "react-native"
import Toast from "react-native-toast-message"
import { ButtonForm } from "../buttonForm"
import { InputForm } from "../inputForm"
import ModalLoading from "../modalLoading"
import Text from "../Text"
import ToastCustom from "../toastCustom"

type Props = {
   onValidate: ({ phone, otp }: { phone: string, otp: number }) => void
}

export default function ViewLogin({ onValidate }: Props) {
   const [loadingLogin, setLoadingLogin] = useState(false)
   const [disableLogin, setDisableLogin] = useState(true)
   const [phone, setPhone] = useState('')
   const { signIn, encryptToken } = useAuthSession();

   const handleCheckPhone = async () => {
      try {
         setLoadingLogin(true)
         const response = await apiCheckPhoneLogin({ phone: `62${phone}` })
         if (response.success) {
            if (response.isWithoutOTP) {
               const encrypted = await encryptToken(response.id)
               signIn(encrypted)
            } else {
               const otp = Math.floor(1000 + Math.random() * 9000)
               const responseOtp = await apiSendOtp({ phone: `62${phone}`, otp })
               if (responseOtp == 200) {
                  await AsyncStorage.setItem('user', response.id)
                  return onValidate({ phone: `62${phone}`, otp })
               }
            }
         } else {
            return Toast.show({ type: 'small', text1: response.message, position: 'top' })
         }
      } catch (error) {
         return Toast.show({ type: 'small', text1: `Terjadi kesalahan, coba lagi`, position: 'top' })
      } finally {
         setLoadingLogin(false)
      }
   };

   return (
      <SafeAreaView>
         <StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
         <ToastCustom />
         <View style={[Styles.p20, Styles.h100]}>
            <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
               <Image
                  source={require("../../assets/images/logo.png")}
                  style={[{ width: 300, height: 150 }]}
                  width={270}
                  height={110}
               />
               {/* <Text style={[Styles.textSubtitle2]}>Digitalisasi Desa Transparansi Kerja</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} />
         }
      </SafeAreaView>

   )
}