/* eslint-disable react-hooks/exhaustive-deps */
import React, {useRef, useEffect, useState} from 'react';
import {
  View,
  Text,
  Image,
  TextInput,
  Pressable,
  TouchableOpacity,
  ActivityIndicator,
} from 'react-native';
import Modal from 'react-native-modal';
import {Colors} from 'global-styles';
import styles from './styles';

const MAXIMUM_LENGTH = 4;
const ModalOTP = props => {
  const {isVisible, code, setCode, loading, onSubmit, error} = props;
  const boxArray = new Array(MAXIMUM_LENGTH).fill(0);
  const inputRef = useRef();
  const [isInputBoxFocused, setIsInputBoxFocused] = useState(false);
  const [isPinReady, setIsPinReady] = useState(false);

  const handleOnPress = () => {
    setIsInputBoxFocused(true);
    inputRef.current.focus();
  };

  const handleOnBlur = () => {
    setIsInputBoxFocused(false);
  };

  useEffect(() => {
    setIsPinReady(code.length === MAXIMUM_LENGTH);
    return () => {
      setIsPinReady(false);
    };
  }, [code]);

  const boxDigit = (_, index) => {
    const emptyInput = '';
    const digit = code[index] || emptyInput;
    // const isCurrentValue = index === code.length;
    // const isLastValue = index === MAXIMUM_LENGTH - 1;
    // const isCodeComplete = code.length === MAXIMUM_LENGTH;

    // const isValueFocused = isCurrentValue || (isLastValue && isCodeComplete);

    // const isFocused = isInputBoxFocused && isValueFocused ? true : false;
    const isFocused = code[index] === digit;

    return (
      <View style={styles.box(isFocused)} key={index}>
        <Text style={styles.boxText}>{digit}</Text>
      </View>
    );
  };
  return (
    <Modal isVisible={isVisible}>
      <View style={styles.container}>
        <View style={styles.content}>
          <View style={styles.top}>
            <Image
              source={require('assets/images/auth-otp-verification.png')}
              style={styles.image}
            />
            <Text style={styles.title}>OTP Verification</Text>
            <Text style={styles.subTitle}>
              Enter OTP Code sent to{' '}
              <Text style={styles.subTitleBlack}>+6289674462657</Text>
            </Text>
            <Pressable style={styles.boxSection} onPress={handleOnPress}>
              {boxArray.map(boxDigit)}
            </Pressable>
            <TextInput
              style={styles.inputHidden}
              value={code}
              placeholder="hore"
              onChangeText={setCode}
              maxLength={MAXIMUM_LENGTH}
              keyboardType="decimal-pad"
              ref={inputRef}
              onBlur={handleOnBlur}
            />
            <View style={styles.resendSection}>
              <Text style={styles.resendLabel}>Tidak menerima kode OTP?</Text>
              <TouchableOpacity>
                <Text style={styles.resendButtonText}>Kirim ulang</Text>
              </TouchableOpacity>
            </View>
            {error?.message && (
              <Text style={styles.error}>{error.message}</Text>
            )}
            <TouchableOpacity
              disabled={!isPinReady}
              onPress={onSubmit}
              style={styles.button(!isPinReady)}>
              {loading ? (
                <ActivityIndicator size="small" color={Colors.WHITE} />
              ) : (
                <Text style={styles.buttonTitle}>Verifikasi</Text>
              )}
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};

export default ModalOTP;
