mobile-darmasaba/components/auth/viewVerification.tsx

import Styles from "@/constants/Styles";
import { 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, View } from "react-native";
import { OtpInput } from "react-native-otp-entry";
import Toast from 'react-native-toast-message';
import { ButtonForm } from "../buttonForm";
import Text from "../Text";
import ToastCustom from "../toastCustom";

type Props = {
   phone: string
   otp: number
}

export default function ViewVerification({ phone, otp }: Props) {
   const [value, setValue] = useState('');
   const [otpFix, setOtpFix] = useState(otp)
   const { signIn, encryptToken } = useAuthSession();

   const login = async () => {
      const valueUser = await AsyncStorage.getItem('user');
      if (valueUser != null) {
         await AsyncStorage.removeItem('user');
         const encrypted = await encryptToken(valueUser);
         signIn(encrypted);
      } else {
         return Toast.show({ type: 'small', text1: 'Terjadi kesalahan', position: 'top' })
      }
   }

   const onCheckOtp = () => {
      if (value === otpFix.toString()) {
         login()
      } else {
         return Toast.show({ type: 'small', text1: 'Kode OTP tidak sesuai', position: 'top' });
      }
   }

   const resendOtp = async () => {
      try {
         const otpNew = Math.floor(1000 + Math.random() * 9000)
         setOtpFix(otpNew)
         const responseOtp = await apiSendOtp({ phone, otp: otpNew })
         if (responseOtp == 200) {
            return Toast.show({ type: 'small', text1: 'Kode OTP berhasil dikirim ulang', })
         }
         return Toast.show({ type: 'small', text1: 'Terjadi kesalahan dalam mengirim kode OTP', })
      } catch (error) {
         console.error('Error fetching data:', error);
         return Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
      }
   }

   return (
      <>
         <StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
         <ToastCustom />
         <View style={Styles.wrapLogin} >
            <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.textSubtitle]}>PERBEKEL DARMASABA</Text> */}
            </View>
            <View style={[Styles.mb30]}>
               <Text style={[Styles.textDefaultSemiBold]}>Verifikasi Nomor Telepon</Text>
               <Text style={[Styles.textMediumNormal]}>Masukkan kode yang kami kirimkan melalui WhatsApp</Text>
               <Text style={[Styles.textMediumSemiBold]}>+{phone}</Text>
            </View>
            <OtpInput
               numberOfDigits={4}
               onTextChange={(text) => setValue(text)}
               focusColor={'#19345E'}
               type="numeric"
               theme={{
                  containerStyle: {
                     width: '80%',
                     alignSelf: 'center'
                  },
                  pinCodeContainerStyle: Styles.verificationCell,
                  pinCodeTextStyle: { color: 'black' }
               }}
            />
            <ButtonForm
               text="SUBMIT"
               onPress={() => { onCheckOtp() }}
            />
            <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
               Tidak Menerima kode verifikasi?  <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text>
            </Text>
         </View>
      </>
   )
}