import Styles from "@/constants/Styles"
import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { useState } from "react"
import { Image, Text, ToastAndroid, View } from "react-native"
import { ButtonForm } from "../buttonForm"
import { InputForm } from "../inputForm"
import ModalLoading from "../modalLoading"


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 handleCheckPhone = async () => {
      try {
         setLoadingLogin(true)
         const response = await apiCheckPhoneLogin({ phone: `62${phone}` });
         if (response.success) {
            const otp = Math.floor(1000 + Math.random() * 9000)
            const responseOtp = await apiSendOtp({ phone: `62${phone}`, otp })
            if (responseOtp == 200) {
               // localStorage.setItem('user', response.id)
               await AsyncStorage.setItem('user', response.id);
               return onValidate({ phone: `62${phone}`, otp })
            }
         }
         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={(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} />
         }
      </>

   )
}