import { faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import axios from "axios";
import React, { useState } from "react";
import {
  Linking,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import {
  send_email_api,
  user_login,
} from "../../services/obananapayApi/user_api";

const Login = ({ setauth, setuserEmail, setuid, setotpSent, settoken }) => {
  const [email, setemail] = useState("");
  const [error, seterror] = useState("");
  const [errorMessage, seterrorMessage] = useState("");

  const [password, setpassword] = useState("");

  const handleLogin = (e) => {
    /* ---------------Login Function --------------- */
    user_login({
      users: email.replace(/\s/g, "").toLowerCase(),
      password: password,
    })
      .then((result) => {
        if (result.status == 200) {
          setuserEmail(result.data.user.email);
          settoken(result.data.token);
          setuid(result.data.user._id);
          send_email();
          setauth(true);
          console.log("login success");
        } else if (result.status == 400) {
          seterrorMessage("invalid credentials!");
        } else {
          seterror(result.message);
          // seterrorMessage("an error occured please try again later!");
          seterrorMessage("invalid credentials!");

          console.log("login error" + result);
        }
      })
      .catch((err) => {
        seterror(err);

        console.log(err);
        console.log(err + "failed to login");
      });
  };
  const send_email = () => {
    const apiKey =
      "ODA4MDc4ZThjMDA4NjVhYzU4MTcyNDJjNTMxY2JlZGU6MGQ4ODg3ZTdiZjY1ZWNkMmQ0NzdiOWJhZGIyYTJhY2Q="; // Replace with your Mailjet API key
    const apiUrl = "https://api.mailjet.com/v3.1/send";

    // const otp = generateOTP(6); // You should have a function to generate the OTP
    // const email2 = "kramblooda@gmail.com";
    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 requestData = {
      Messages: [
        {
          From: {
            Email: "webdev@obanana.com",
            Name: "Obanana B2B",
          },
          To: [
            {
              Email: email,
              Name: "Subscriber",
            },
          ],
          Subject: "Obanana OTP",
          TextPart: "Greetings from Obanana!",
          HTMLPart: `This is your OTP - <b>${randomNumber}</b>. Do not share this with anyone.`,
        },
      ],
    };

    const config = {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Basic ${apiKey}`,
      },
    };

    axios
      .post(apiUrl, requestData, config)
      .then((response) => {
        const status = response.data.Messages[0].Status;
        console.log(response.data.Messages[0].Status);
        console.log(randomNumber);
        setotpSent(randomNumber);

        return `${status},${randomNumber}`;
      })
      .catch((error) => {
        console.error("Error sending OTP email:", error);
        // Handle the error here
      });

    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;

      // You would need to implement the generateOTP function as well.

      // send_email_api({
      //   email: email2.replace(/\s/g, "").toLowerCase(),
      //   html: `<p>your OTP code to continue your obanana pay transaction is ${randomNumber} </p>`,
      // })
      //   .then((result) => {
      //     setotpSent(randomNumber);
      //     if (result.status == 200) {
      //     } else {
      //       seterror(result.message);
      //     }

      //     console.log(result);
      //   })
      //   .catch((err) => {
      //     seterror(err);

      //     console.error(err);
      //     console.log(err + "failed to send email");
      //   });
    } else {
      //   setotpError(true);
    }
  };

  const openStore = () => {
    // console.log("u[pp");
    if (Platform.OS === "ios") {
      console.log("Running on iOS");
      Linking.openURL("itms-apps://itunes.apple.com/app/com.coffye.oqebtj");
      // Perform iOS-specific operations or rendering
    } else if (Platform.OS === "android") {
      console.log("Running on Android");
      Linking.openURL("market://details?id=com.coffye.oqebtj");

      // Perform Android-specific operations or rendering
    } else {
      console.log("Running on another platform");
      // Handle other platforms if necessary
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.wrap}>
        <View style={styles.wrapTop}>
          <Text style={styles.wrapTopHeader}>Obananapay</Text>
        </View>
        <View style={styles.wrapMiddle}>
          <View style={styles.wrapMiddleForm}>
            <View style={styles.wrapMiddleFormInput}>
              <Text style={styles.inputText}>Email Address:</Text>
              <TextInput
                style={styles.input}
                onChangeText={(e) => {
                  setemail(e);
                }}
                value={email}
                placeholder=""
                // keyboardType="numeric"
              />
            </View>
            <View style={styles.wrapMiddleFormInput}>
              <Text style={styles.inputText}>Password:</Text>
              <TextInput
                style={styles.input}
                onChangeText={(e) => {
                  setpassword(e);
                }}
                value={password}
                placeholder=""
                // keyboardType="numeric"
                secureTextEntry={true}
              />
            </View>
          </View>
          {errorMessage ? (
            <Text style={{ color: "red" }}>{errorMessage}</Text>
          ) : null}
        </View>

        <View style={styles.wrapBottom}>
          <TouchableOpacity
            style={styles.btn}
            onPress={() => {
              handleLogin();
            }}
          >
            <Text style={styles.btnText}>LOGIN</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.btn1}
            onPress={() => {
              openStore();
            }}
          >
            <Text style={styles.btnText}>Download Obananapay</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    height: "100%",
    width: "100%",
  },
  wrap: {
    backgroundColor: "#fff",
    height: "100%",
    width: "100%",
    bottom: 0,
    borderColor: "#bebebe",
    borderRadius: 25,
  },

  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%",
  },
  wrapBottom: {
    justifyContent: "center",
    alignItems: "center",
  },
  wrapMiddleForm: {},
  wrapMiddleFormInput: {
    marginVertical: 10,
  },
  input: {
    height: 50,
    width: 300,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderColor: "#bebebe",
    borderRadius: 10,
  },
  inputText: {
    marginLeft: 15,
    fontSize: 16,
  },
  btn: {
    backgroundColor: "#ffaa00",
    paddingVertical: 15,
    paddingHorizontal: 55,
    marginTop: 30,
  },
  btn1: {
    // backgroundColor: "#ffaa00",
    paddingVertical: 15,
    paddingHorizontal: 55,
    marginTop: 30,
  },
  btnText: {
    color: "#fff",
    fontWeight: "600",
    letterSpacing: 1,
    fontSize: 16,
  },
  btnText1: {
    color: "#ffaa00",
    fontWeight: "600",
    letterSpacing: 1,
    fontSize: 16,
  },
});
export default Login;