import { faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useRef, useState } from "react";
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import Login from "../../components/obananapay/Login";
import OTP from "../../components/obananapay/OTP";
import ProcessPayment from "../../components/obananapay/ProcessPayment";

const Auth = ({
  onRequestClose,
  amount,
  desc,
  pay_refno,
  username,
  email,
  number,
  setsuccessCOD,
}) => {
  const [auth, setauth] = useState(false);
  const [otpCheck, setotpCheck] = useState(false);
  const [loginfail, setloginfail] = useState(false);
  const [loggedin, setloggedin] = useState(false);
  const [userEmail, setuserEmail] = useState("");
  const [token, settoken] = useState("");
  const [otpError, setotpError] = useState("");
  const [otpSent, setotpSent] = useState("");
  const [uid, setuid] = useState("");
  const [success, setsuccess] = useState(false);
  const [loading, setloading] = useState(false);
  const [lowBal, setlowBal] = useState(false);

  useEffect(() => {}, [lowBal]);

  const navigation = useNavigation();

  const amountformatt = amount / 100;
  const amountformatted = amountformatt;
  return (
    <View style={styles.container}>
      <View style={styles.wrapTop}></View>
      <View style={styles.wrap}>
        <View style={styles.wrapHeader}>
          <View style={{ width: 25 }}></View>
          <Text style={styles.wrapHeaderText}>PAYMENT</Text>
          {success === false ? (
            <TouchableOpacity
              onPress={() => {
                onRequestClose(false);
              }}
            >
              <FontAwesomeIcon icon={faClose} color={"#FFAA00"} size={25} />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity></TouchableOpacity>
          )}
        </View>
        {auth === false && otpCheck === false ? (
          <Login
            setauth={setauth}
            setuserEmail={setuserEmail}
            setuid={setuid}
            setotpSent={setotpSent}
            settoken={settoken}
          />
        ) : auth === true && otpCheck === false ? (
          <OTP
            setotpCheck={setotpCheck}
            otp={otpSent}
            uid={uid}
            token={token}
            amount={amountformatted}
            desc={desc}
            setloading={setloading}
            setsuccess={setsuccess}
            pay_refno={pay_refno}
            username={username}
            number={number}
            email={email}
            setsuccessCOD={setsuccessCOD}
            setlowBal={setlowBal}
          />
        ) : auth === true && otpCheck === true && loading === true ? (
          <ProcessPayment
            setsuccessCOD={setsuccessCOD}
            uid={uid}
            token={token}
          />
        ) : success === true && loading === false ? (
          <View style={styles.otpSuccess}>
            <View style={styles.otpWrap}>
              <Text style={styles.otpWrapText}>Successful Payment</Text>
            </View>
            {/* <View style={styles.paymentDetails}>
              <Text>order ID : 2hdyjb44</Text>
            </View> */}

            <View style={styles.wrapBottom}>
              <TouchableOpacity
                style={styles.btn}
                onPress={() => {
                  navigation.navigate("Home");
                }}
              >
                <Text style={styles.btnText}>GO BACK</Text>
              </TouchableOpacity>
            </View>
          </View>
        ) : success === false && loading === false && lowBal === true ? (
          <View style={styles.otpSuccess}>
            <View style={styles.otpWrap2}>
              <Text style={styles.otpWrapText}>Not Enough Balance!</Text>
              <Text style={styles.otpWrapText1}>
                Please load up your Obananapay balance before continuing
              </Text>
            </View>
            {/* <View style={styles.paymentDetails}>
              <Text>order ID : 2hdyjb44</Text>
            </View> */}

            <View style={styles.wrapBottom}>
              <TouchableOpacity
                style={styles.btn}
                onPress={() => {
                  navigation.navigate("Home");
                }}
              >
                <Text style={styles.btnText}>GO BACK</Text>
              </TouchableOpacity>
            </View>
          </View>
        ) : null}
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // backgroundColor: "#",
    // backgroundColor: "#4d4d4d",
    height: "100%",
    width: "100%",
    bottom: 0,
  },
  wrap: {
    backgroundColor: "#fff",
    height: "96%",
    bottom: 0,
    borderWidth: 2,
    borderColor: "#eeeeee",
    borderTopRightRadius: 25,
    borderTopLeftRadius: 25,
    padding: 10,
  },
  wrapTop: {
    height: "4%",
    bottom: 0,
  },
  wrapHeader: {
    justifyContent: "space-between",
    flexDirection: "row",
  },
  wrapHeaderText: {
    fontWeight: "600",
    letterSpacing: 1,
    fontSize: 16,
    color: "#2e2e2e",
  },
  otpSuccess: {
    justifyContent: "center",
    alignItems: "center",
  },
  otpWrap: {
    height: 200,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  otpWrap2: {
    height: 200,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 50,
  },
  otpWrapText: {
    fontWeight: "600",
    letterSpacing: 1,
    fontSize: 19,
    color: "#2e2e2e",
    marginLeft: 10,
  },
  otpWrapText1: {
    fontWeight: "400",
    letterSpacing: 1,
    fontSize: 19,
    color: "#ff2323",
    marginLeft: 10,
    marginTop: 40,
    textAlign: "center",
  },
  wrapBottom: {
    justifyContent: "center",
    alignItems: "center",
  },
  paymentDetails: {
    justifyContent: "center",
    alignItems: "center",
    height: 80,
  },
  btn: {
    backgroundColor: "#ffaa00",
    paddingVertical: 15,
    paddingHorizontal: 55,
    marginTop: 50,
  },
  btnText: {
    color: "#fff",
    fontWeight: "600",
    letterSpacing: 1,
    fontSize: 16,
  },
});
export default Auth;