import { ButtonForm } from "@/components/buttonForm";
import Styles from "@/constants/Styles";
import { router } from "expo-router";
import React, { useState } from "react";
import { Image, SafeAreaView, Text, View } from "react-native";
import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field';

export default function Index() {
   const [value, setValue] = useState('');
   const ref = useBlurOnFulfill({ value, cellCount: 4 });
   const [props, getCellOnLayoutHandler] = useClearByFocusCell({
      value,
      setValue,
   });


   return (
      <SafeAreaView 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>
         <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]}>+628980185458</Text>
         </View>
         <CodeField
            ref={ref}
            {...props}
            value={value}
            rootStyle={{ width: '80%', alignSelf: 'center' }}
            onChangeText={setValue}
            cellCount={4}
            keyboardType="number-pad"
            renderCell={({ index, symbol, isFocused }) => (
               <Text
                  key={index}
                  style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell]}
                  onLayout={getCellOnLayoutHandler(index)}>
                  {symbol || (isFocused ? <Cursor /> : null)}
               </Text>
            )}
         />
         <ButtonForm text="SUBMIT" onPress={() => { router.push("/home") }} />
         <Text style={[Styles.textInformation, Styles.cDefault, { textAlign: 'center' }]}>
            Tidak Menerima kode verifikasi? Kirim Ulang
         </Text>
      </SafeAreaView>
   );
}