import { faEye, faEyeSlash } 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 {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import {
  change_password,
  forgot_password,
} from "../../services/api/controllers/auth";
import { search_customer } from "../../services/api/controllers/customers";
import { send_email_api } from "../../services/obananapayApi/user_api";

const ForgotPassword = () => {
  const [emailDupe, setemailDupe] = useState(false);
  const [email, setemail] = useState("");
  const [password, setPassword] = useState("");
  const [passwordRepeat, setPasswordRepeat] = useState(null);
  const [samepass, setsamepass] = useState("none");
  const [seePassword, setSeePassword] = useState(false);

  const [currPage, setcurrPage] = useState("Email");
  const et1 = useRef();
  const et2 = useRef();
  const et3 = useRef();
  const et4 = useRef();
  const et5 = useRef();
  const et6 = useRef();
  const [f1, setF1] = useState("");
  const [f2, setF2] = useState("");
  const [f3, setF3] = useState("");
  const [f4, setF4] = useState("");
  const [f5, setF5] = useState("");
  const [f6, setF6] = useState("");
  const [errorOTP, seterrorOTP] = useState(false);
  const [count, setCount] = useState(20);
  const [error, seterror] = useState("");
  const [tokenHere, settokenHere] = useState("");
  const [otpSent, setotpSent] = useState("");
  const [otpError, setotpError] = useState("");

  const navigation = useNavigation();
  useEffect(() => {
    const interval = setInterval(() => {
      if (count == 0) {
        clearInterval(interval);
      } else {
        setCount(count - 1);
      }
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, [count]);
  /* ---------------check if the  sent otp and the entered otp is the same--------------- */

  const otpValidate = () => {
    let enteredOtp = f1 + f2 + f3 + f4 + f5 + f6;
    // if (enteredOtp == otpSent) {
    //   console.log(otp);
    //   setotpCheck(true);
    change_password({
      body: {
        username: email,
        otp: enteredOtp,
        newPassword: password,
      },
    })
      .then((result) => {
        // console.log(result.data);

        if (result.status === 200) {
          setcurrPage("Success");
        } else if (result.status === 400) {
          setotpError(true);
          console.log('error otp');
        } else {
          seterror(result.error+"....");
        }
      })
      .catch((error) => {
        // setError(error.message);
        seterrorOTP(true);

        console.log(error.message+'....');
      })
      .finally(() => {
        // setprodIsLoading(false); // Set loading to false when done loading
      });

    // } else {
    //   setotpError(true);
    // }
  };
  const handleChange = (e) => {
    search_customer({
      searchData: e,
    })
      .then((result) => {
        // console.log(result.data);

        if (result.error) {
          seterror(result.error);
        } else {
          if (result.data?.results.length < 1) {
            setemailDupe(false);
          } else {
            setemail(e);
            setemailDupe(true);
            console.log(result.data?.results.length + " " + emailDupe);
          }
          // console.log("length on search " + result.data?.results.length);

          // setloading(false);
        }
      })
      .catch((error) => {
        // setError(error.message);
        console.log(error.message);
      })
      .finally(() => {
        // setprodIsLoading(false); // Set loading to false when done loading
      });
  };
  const send_email = () => {
    if (email) {
      const min = 100000; // Minimum 6-digit number
      const max = 999999; // Maximum 6-digit number
      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      //   const email2 = "kramblooda@gmail.com";
      // send_email_api({
      //   email: email.replace(/\s/g, "").toLowerCase(),
      //   html: `<p>your OTP code to continue changing your password is ${randomNumber} </p>`,
      // })
      //   .then((result) => {
      //     setotpSent( );
      //     if (result.status == 200) {
      //       setcurrPage("OTP");
      //     } else {
      //       seterror(result.message);
      //     }
      //     console.log(result);
      //   })
      //   .catch((err) => {
      //     seterror(err);
      //     console.error(err);
      //     console.log(err + "failed to send email");
      //   });

      forgot_password({
        body: {
          username: email,
        },
      })
        .then((result) => {
          // console.log(result.data);

          if (result.status === 200) {
            setcurrPage("OTP");
          } else {
            seterror(result.error);
          }
        })
        .catch((error) => {
          // setError(error.message);
          console.log(error.message);
        })
        .finally(() => {
          // setprodIsLoading(false); // Set loading to false when done loading
        });
    } else {
      //   setotpError(true);
    }
  };

  return (
    <View style={styles.container}>
      {currPage === "Email" ? (
        <View style={styles.wrap}>
          <View style={styles.wrapTop}>
            <Text style={styles.wrapTopHeader}>Forgot Password</Text>
          </View>
          <View style={styles.wrapMiddle}>
            <View style={styles.wrapMiddleForm}>
              <View style={styles.wrapMiddleFormInput}>
                <Text style={styles.inputText}>
                  Email Address{" "}
                  {!emailDupe && email !== "" ? (
                    <Text style={{ color: "red" }}>Email does not exist</Text>
                  ) : (
                    ""
                  )}
                </Text>
                <TextInput
                  style={styles.input}
                  onChangeText={(e) => {
                    handleChange(e);
                  }}
                  //   value={email}
                  placeholder=""
                  // keyboardType="numeric"
                />
              </View>
            </View>
          </View>
          {/* {error ? <Text>{error}</Text> : null} */}

          <View style={styles.wrapBottom}>
            <TouchableOpacity
              style={styles.btn}
              disabled={emailDupe ? false : true}
              onPress={() => {
                send_email();
              }}
            >
              <Text style={styles.btnText}>Continue</Text>
            </TouchableOpacity>
          </View>
        </View>
      ) : currPage === "OTP" ? (
        <View style={styles.wrap}>
          <Text style={styles.title1}>OTP Verification</Text>
          <Text style={styles.title}>
            Please enter the verification code we just sent on your email{" "}
            {email} together with your new password.
          </Text>
          <View style={styles.otpView}>
            <TextInput
              ref={et1}
              style={[
                styles.inputView,
                { borderColor: f1.length >= 1 ? "green" : "#f57f17" },
              ]}
              keyboardType="number-pad"
              maxLength={1}
              value={f1}
              onChangeText={(txt) => {
                setF1(txt);
                if (txt.length >= 1) {
                  et2.current.focus();
                }
              }}
            />
            <TextInput
              ref={et2}
              style={[
                styles.inputView,
                { borderColor: f2.length >= 1 ? "green" : "#f57f17" },
              ]}
              keyboardType="number-pad"
              maxLength={1}
              value={f2}
              onChangeText={(txt) => {
                setF2(txt);
                if (txt.length >= 1) {
                  et3.current.focus();
                } else if (txt.length < 1) {
                  et1.current.focus();
                }
              }}
            />

            <TextInput
              ref={et3}
              style={[
                styles.inputView,
                { borderColor: f3.length >= 1 ? "green" : "#f57f17" },
              ]}
              keyboardType="number-pad"
              maxLength={1}
              value={f3}
              onChangeText={(txt) => {
                setF3(txt);
                if (txt.length >= 1) {
                  et4.current.focus();
                } else if (txt.length < 1) {
                  et2.current.focus();
                }
              }}
            />

            <TextInput
              ref={et4}
              style={[
                styles.inputView,
                { borderColor: f4.length >= 1 ? "green" : "#f57f17" },
              ]}
              keyboardType="number-pad"
              maxLength={1}
              value={f4}
              onChangeText={(txt) => {
                setF4(txt);
                if (txt.length >= 1) {
                  et5.current.focus();
                } else if (txt.length < 1) {
                  et3.current.focus();
                }
              }}
            />

            <TextInput
              ref={et5}
              style={[
                styles.inputView,
                { borderColor: f5.length >= 1 ? "green" : "#f57f17" },
              ]}
              keyboardType="number-pad"
              maxLength={1}
              value={f5}
              onChangeText={(txt) => {
                setF5(txt);
                if (txt.length >= 1) {
                  et6.current.focus();
                } else if (txt.length < 1) {
                  et4.current.focus();
                }
              }}
            />

            <TextInput
              ref={et6}
              style={[
                styles.inputView,
                { borderColor: f6.length >= 1 ? "green" : "#f57f17" },
              ]}
              keyboardType="number-pad"
              maxLength={1}
              value={f6}
              onChangeText={(txt) => {
                setF6(txt);
                if (txt.length >= 1) {
                  et6.current.focus();
                } else if (txt.length < 1) {
                  et5.current.focus();
                }
              }}
            />
          </View>
          <View style={styles.wrapMiddle}>
            <View style={styles.wrapMiddleForm}>
              <Text style={styles.inputText}>New Password:</Text>

              <View style={styles.input2}>
                <TextInput
                  style={styles.inputPass}
                  placeholderTextColor="#003f5c"
                  secureTextEntry={!seePassword}
                  autoCapitalize="none"
                  value={password}
                  onChangeText={(text) => setPassword(text)}
                />
                <TouchableOpacity
                  style={{ color: "green", right: 10 }}
                  onPress={() => setSeePassword(!seePassword)}
                >
                  <FontAwesomeIcon
                    icon={seePassword ? faEye : faEyeSlash}
                    size={18}
                    color="#003f5c"
                  />
                </TouchableOpacity>
              </View>
            </View>
            <View style={styles.wrapMiddleForm}>
              <Text style={styles.inputText}>Confirm New Password:</Text>

              <View style={styles.input2}>
                <TextInput
                  style={styles.inputPass}
                  placeholderTextColor="#003f5c"
                  secureTextEntry={!seePassword}
                  autoCapitalize="none"
                  value={passwordRepeat}
                  onChangeText={(text) => setPasswordRepeat(text)}
                />
                <TouchableOpacity
                  style={{ color: "green", right: 10 }}
                  onPress={() => setSeePassword(!seePassword)}
                >
                  <FontAwesomeIcon
                    icon={seePassword ? faEye : faEyeSlash}
                    size={18}
                    color="#003f5c"
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
          {errorOTP ? (
            <View style={{ width: "100%", marginBottom: 10 }}>
              <Text
                style={{
                  fontSize: 20,
                  fontWeight: "500",
                  color: "#ed0000",
                  alignSelf: "center",
                  textAlign: "center",
                  paddingTop: 10,
                  paddingLeft: 10,
                }}
              >
                Wrong OTP!!
              </Text>
            </View>
          ) : null}
          <TouchableOpacity
            disabled={
              f1 !== "" &&
              f2 !== "" &&
              f3 !== "" &&
              f4 !== "" &&
              f5 !== "" &&
              f6 !== ""
                ? false
                : true
            }
            style={[
              styles.verifyOtpBtn,
              {
                backgroundColor:
                  f1 !== "" &&
                  f2 !== "" &&
                  f3 !== "" &&
                  f4 !== "" &&
                  f5 !== "" &&
                  f6 !== ""
                    ? "#4caf50"
                    : "orange",
              },
            ]}
            onPress={() => otpValidate()}
          >
            <Text style={styles.btntxt}>Confirm</Text>
          </TouchableOpacity>
          <View style={styles.resendView}>
            <Text
              style={{
                fontSize: 18,
                alignSelf: "flex-start",
                fontWeight: "700",
                color: count == 0 ? "orange" : "#7b7b7b",
              }}
              onPress={() => {
                send_email();
              }}
            >
              Resend Code
            </Text>
            {count !== 0 && (
              <Text style={{ marginLeft: 20, fontSize: 18 }}>
                {count + " seconds"}
              </Text>
            )}
          </View>
        </View>
      ) : // ) : currPage === "ChangePassword" ? (
      //   <View style={styles.wrap}>
      //     <View style={styles.wrapTop}>
      //       <Text style={styles.wrapTopHeader}>Change Password</Text>
      //     </View>
      //     <View style={styles.wrapMiddle}>
      //       <View style={styles.wrapMiddleForm}>
      //         <Text style={styles.inputText}>Password:</Text>

      //         <View style={styles.input2}>
      //           <TextInput
      //             style={styles.inputPass}
      //             placeholderTextColor="#003f5c"
      //             secureTextEntry={!seePassword}
      //             autoCapitalize="none"
      //             value={password}
      //             onChangeText={(text) => setPassword(text)}
      //           />
      //           <TouchableOpacity
      //             style={{ color: "green", right: 10 }}
      //             onPress={() => setSeePassword(!seePassword)}
      //           >
      //             <FontAwesomeIcon
      //               icon={seePassword ? faEye : faEyeSlash}
      //               size={18}
      //               color="#003f5c"
      //             />
      //           </TouchableOpacity>
      //         </View>
      //       </View>
      //       <View style={styles.wrapMiddleForm}>
      //         <Text style={styles.inputText}>Confirm Password:</Text>

      //         <View style={styles.input2}>
      //           <TextInput
      //             style={styles.inputPass}
      //             placeholderTextColor="#003f5c"
      //             secureTextEntry={!seePassword}
      //             autoCapitalize="none"
      //             value={passwordRepeat}
      //             onChangeText={(text) => setPasswordRepeat(text)}
      //           />
      //           <TouchableOpacity
      //             style={{ color: "green", right: 10 }}
      //             onPress={() => setSeePassword(!seePassword)}
      //           >
      //             <FontAwesomeIcon
      //               icon={seePassword ? faEye : faEyeSlash}
      //               size={18}
      //               color="#003f5c"
      //             />
      //           </TouchableOpacity>
      //         </View>
      //       </View>
      //     </View>
      //     {/* {error ? <Text>{error}</Text> : null} */}

      //     <View style={styles.wrapBottom}>
      //       <TouchableOpacity
      //         style={styles.btn}
      //         //   disabled={emailDupe ? false : true}
      //         onPress={() => {
      //           handleLogin();
      //         }}
      //       >
      //         <Text style={styles.btnText}>Continue</Text>
      //       </TouchableOpacity>
      //     </View>
      //   </View>
      // )

      currPage === "Success" ? (
        <View style={styles.wrap}>
          <Text style={styles.title1}>Change Password Successful</Text>
          <Text style={styles.title}>
            you may now login with your new password!
          </Text>
          <View style={styles.wrapBottom}>
            <TouchableOpacity
              style={styles.btn}
              //   disabled={emailDupe ? false : true}
              onPress={() => {
                // handleLogin();
                navigation.navigate("Login");
              }}
            >
              <Text style={styles.btnText}>Continue to Login</Text>
            </TouchableOpacity>
          </View>
        </View>
      ) : null}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffff",
    width: "100%",
    height: "100%",
  },
  wrapper: {
    height: "100%",
    width: "100%",
  },
  header: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 25,
  },
  wrap: {
    backgroundColor: "#fff",
    height: "100%",
    width: "100%",
    bottom: 0,
    borderColor: "#bebebe",
    borderRadius: 25,
    // justifyContent: "center",
    alignItems: "center",
    paddingTop: 100,
  },

  wrapTop: {
    justifyContent: "center",
    alignItems: "center",
    height: 130,
    // backgroundColor:'#ffaa00',
    marginVertical: 15,
  },
  wrapTopHeader: {
    fontSize: 25,
    fontWeight: "600",
    color: "#ffaa00",
  },
  wrapMiddle: {
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    marginTop: 20,
  },
  wrapBottom: {
    justifyContent: "center",
    alignItems: "center",
  },
  wrapMiddleForm: {
    marginTop: 20,
  },
  wrapMiddleFormInput: {
    marginVertical: 10,
  },
  input: {
    height: 50,
    width: 300,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderColor: "#bebebe",
    borderRadius: 10,
  },
  input2: {
    height: 50,
    width: 300,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderColor: "#bebebe",
    borderRadius: 10,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  inputPass: {
    height: 50,
    width: 250,
    // margin: 12,
    // borderWidth: 1,
    // padding: 10,
    // borderColor: "#bebebe",
    // borderRadius: 10,
  },
  inputreg: {
    width: "100%",
    // backgroundColor: "#FEF8C5",
    shadowRadius: 0,
    shadowColor: "orange",
    borderRadius: 10,
    height: "6%",
    marginBottom: 5,
    marginTop: 5,
    justifyContent: "center",
    alignItems: "center",
    padding: 5,
    borderWidth: 0,
    paddingHorizontal: 10,
    flexDirection: "row",
  },
  inputText: {
    marginLeft: 15,
    fontSize: 16,
  },
  btn: {
    backgroundColor: "#ffaa00",
    paddingVertical: 15,
    paddingHorizontal: 55,
    marginTop: 30,
  },
  btnText: {
    color: "#fff",
    fontWeight: "600",
    letterSpacing: 1,
    fontSize: 16,
  },
  btnReg: {
    // backgroundColor: "#333",
    width: "100%",
    justifyContent: "center",
    alignContent: "center",
    paddingVertical: 15,
    paddingHorizontal: 55,
    marginTop: 30,
  },
  btnTextReg: {
    color: "#ffaa00",
    textAlign: "center",
    fontWeight: "600",
    letterSpacing: 1,
    fontSize: 16,
  },
  title: {
    fontSize: 15,
    fontWeight: "500",
    marginTop: 5,
    marginLeft: 35,
    alignSelf: "flex-start",
    textAlign: "center",
    width: "83%",
    color: "#969696",
  },
  title1: {
    fontSize: 25,
    fontWeight: "700",
    marginTop: 10,
    marginLeft: 25,
    alignSelf: "center",
    textAlign: "center",
    width: "83%",
    color: "#525252",
  },
  otpView: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    marginTop: 50,
  },
  inputView: {
    width: 50,
    height: 50,
    borderWidth: 0.5,
    borderRadius: 15,
    marginLeft: 10,
    textAlign: "center",
    fontSize: 18,
    fontWeight: "700",
  },
  verifyOtpBtn: {
    width: "40%",
    height: 45,
    backgroundColor: "orange",
    borderRadius: 15,
    alignSelf: "center",
    marginTop: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  btntxt: {
    color: "#fff",
    fontSize: 20,
    fontWeight: "700",
  },
  resendView: {
    flexDirection: "row",
    alignSelf: "center",
    marginTop: 10,
    marginBottom: 30,
    fontWeight: "200",
  },
});
export default ForgotPassword;