import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  Modal,
  Pressable,
} from "react-native";
import React, { useRef, useEffect, useState } from "react";
import { Props } from "./EmailConnect.types";
import { styles } from "./EmailConnect.styles";
import { validationHelper } from "../../helperFunction";

export default function EmailConnect(Props: Props) {
  const {
    emailValue = "",
    placeholder = "Email",
    placeholderTextColor,
    emailTextInputContainerStyle,
    BtnText = "Countinue",
  } = Props;

  const [modalVisible, setModalVisible] = useState(false);

  const [email, setEmail] = useState(emailValue);

  const onEmailChange = (value: string) => {
    setEmail(value);
    if (Props.onChangeEmailText) {
      Props.onChangeEmailText(value);
    }
  };

  const handleBtn = async () => {
    // try {
    //   const response = await QuestSDK.meta.user.loginWithEmail({
    //     email: email,
    //   });
    //   console.log(response);
    //   if (response.success == true) {
    //     setModalVisible(true);
    //   } else {
    //     throw new Error(response.error);
    //   }
    // } catch (error) {
    //   console.log(error);
    // }
  };

  return (
    <View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Enter The OTP!</Text>

            {/* <OtpInput
              numberOfDigits={6}
              onTextChange={(text) => console.log(text)}
              theme={{
                containerStyle: styles.container,
              }}
            /> */}
            {/* <View>
              <TextInput
                ref={(input) => (otpInputRef = input)}
                value={otp}
                onChangeText={onOtpChange}
                style={{ width: 0, height: 0, color: "red", fontSize: 13 }}
                maxLength={lengthInput}
                returnKeyType="done"
                keyboardType="numeric"
                focusable={true}
              />

              <View style={styles.containerInput}>
                {Array(lengthInput)
                  .fill(null)
                  .map((data, index) => (
                    <View key={index} style={styles.cellView}>
                      <Text
                        style={styles.cellText}
                        onPress={() => {
                          otpInputRef.current?.focus();
                          console.log("otp Click");
                        }}
                      >
                        {otp && otp.length > 0 ? otp[index] : ""}
                      </Text>
                    </View>
                  ))}
              </View>
            </View> */}
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Veirfy</Text>
            </Pressable>
          </View>
        </View>
      </Modal>

      <View style={[styles.inputContainer, emailTextInputContainerStyle]}>
        <TextInput
          value={email}
          onChangeText={onEmailChange}
          placeholder={placeholder}
          placeholderTextColor={placeholderTextColor}
          style={styles.inputText}
        />
      </View>

      {validationHelper.isValidEmail(email) && (
        <View>
          <TouchableOpacity
            onPress={handleBtn}
            style={styles.colorButtonContainer}
          >
            <Text style={styles.BtnText}>{BtnText}</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}