import {
  faAngleLeft,
  faAngleRight,
  faArrowLeft,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useIsFocused, useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { get_customer } from "../../services/api/controllers/customers";

const AccountSettings = ({ route }) => {
  const navigation = useNavigation();
  const [user, setuser] = useState([]);
  const { isrefresh } = route.params ?? "";
  const [refresh, setrefresh] = useState(false);
  const [error, seterror] = useState(false);
  const isFocused = useIsFocused();

  useEffect(() => {
    /* ---------------Check for the user saved email--------------- */

    AsyncStorage.getItem("userData")
      .then((pass) => {
        const userDataArray = JSON.parse(pass);
        setuser(userDataArray);
        console.log(pass);
      })
      .catch((error) => {
        console.log(error + "weeewwww");
      });
  }, []);
  useEffect(() => {
    setrefresh(!isrefresh);
    if (isrefresh) {
      AsyncStorage.getItem("userData")
        .then((pass) => {
          // console.log("mm "+pass._id);
          const userDataArray = JSON.parse(pass);
          // setuser(userDataArray);
          get_customer({ id: userDataArray[0]?._id })
            .then((result) => {
              // console.log(result.data);

              if (result.error) {
                seterror(result.error);
              } else {
                console.log([result.data]);
                let userr = [result.data];
                AsyncStorage.setItem("userData", JSON.stringify(userr));
                setuser([result.data]);
              }
            })
            .catch((error) => {
              // setError(error.message);
              console.log(error.message);
            })
            .finally(() => {
              // setprodIsLoading(false); // Set loading to false when done loading
            });
        })
        .catch((error) => {
          console.log(error + "weeewwww");
        });
    }
    // console.log("get cutomer add :" + user[0]?.login_id);
  }, [isrefresh]);
  useEffect(() => {
    AsyncStorage.getItem("userData")
    .then((pass) => {
      // console.log("mm "+pass._id);
      const userDataArray = JSON.parse(pass);
      // setuser(userDataArray);
      get_customer({ id: userDataArray[0]?._id })
        .then((result) => {
          // console.log(result.data);

          if (result.error) {
            seterror(result.error);
          } else {
            console.log([result.data]);
            let userr = [result.data];
            AsyncStorage.setItem("userData", JSON.stringify(userr));
            setuser([result.data]);
          }
        })
        .catch((error) => {
          // setError(error.message);
          console.log(error.message);
        })
        .finally(() => {
          // setprodIsLoading(false); // Set loading to false when done loading
        });
    })
    .catch((error) => {
      console.log(error + "weeewwww");
    });
  }, [isFocused])
  
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.navigate("Home")}
          style={styles.backIcon}
        >
          <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
        </TouchableOpacity>
        <Text style={styles.headerText}>Account Settings</Text>
      </View>

      <View style={styles.wrapper}>
        <View style={styles.subHeaderWrap}>
          <View style={styles.subHeader}>
            <Text style={styles.subHeaderText}>My Account</Text>
          </View>
          <View style={styles.accountPrev}>
            <View style={styles.accountPrevWrap}>
              <Image
                style={{
                  width: 100,
                  height: 100,
                  resizeMode: "cover",
                  borderRadius: 100,
                  // marginLeft: 20,
                }}
                source={{
                  uri: user[0]?.customer_image??"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
                }}
              />
              <Text style={styles.accountPrevText}>
                {user[0]?.first_name} {user[0]?.last_name}
              </Text>
            </View>
          </View>
          <View style={styles.subContent1}>
            <Text style={styles.subContent1Text}>Username</Text>
            <Text style={styles.accountPrevText2}>
              {user[0]?.user_login ?? ""}
            </Text>
          </View>
          <View style={styles.subContent1}>
            <Text style={styles.subContent1Text}>Phone Number</Text>
            <Text style={styles.accountPrevText2}>
              {
              // "+63" +
               user[0]?.phone_number ?? ""}
            </Text>
          </View>
          <View style={styles.subContent1}>
            <Text style={styles.subContent1Text}>Email Address</Text>
            <Text style={styles.accountPrevText2}>{user[0]?.user_email}</Text>
          </View>
          <View style={styles.subContentsWrap}>
            <TouchableOpacity
              style={styles.subContent}
              onPress={() =>
                navigation.navigate("AccountAndSecurity", {
                  isrefresh: false,
                  userData: user[0],
                })
              }
            >
              <Text style={styles.subContentText}>Edit profile</Text>
              <FontAwesomeIcon
                icon={faAngleRight}
                color={"#d4c600"}
                size={20}
              />
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.subContent}
              onPress={() =>
                navigation.navigate("Address", { isrefresh: !refresh })
              }
            >
              <Text style={styles.subContentText}>My Addresses</Text>
              <FontAwesomeIcon
                icon={faAngleRight}
                color={"#d4c600"}
                size={20}
              />
            </TouchableOpacity>
            {/* <TouchableOpacity
              style={styles.subContent}
              onPress={() => navigation.navigate("Home")}
            >
              <Text style={styles.subContentText}>Bank Accounts</Text>
              <FontAwesomeIcon
                icon={faAngleRight}
                color={"#d4c600"}
                size={20}
              />
            </TouchableOpacity> */}
          </View>
        </View>
        <TouchableOpacity
          onPress={() => {
            AsyncStorage.removeItem("something")
              .then(() => {
                console.log("pass removed from AsyncStorage");
              })
              .catch((error) => {
                console.error("Error removing item from AsyncStorage: ", error);
              });
            AsyncStorage.removeItem("AccessToken")
              .then(() => {
                console.log("token removed from AsyncStorage");
              })
              .catch((error) => {
                console.error("Error removing item from AsyncStorage: ", error);
              });
            AsyncStorage.removeItem("email")
              .then(() => {
                console.log("email removed from AsyncStorage");
              })
              .catch((error) => {
                console.error("Error removing item from AsyncStorage: ", error);
              });
            AsyncStorage.removeItem("userData")
              .then(() => {
                console.log("user data removed from AsyncStorage");
              })
              .catch((error) => {
                console.error("Error removing item from AsyncStorage: ", error);
              });
            navigation.navigate("Home", { userLoggedin: false });
          }}
          style={styles.subContent}
        >
          <Text style={{ textAlign: "center" }}>Log Out</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffff",
    width: "100%",
    height: "100%",
  },
  wrapper: {
    height: "100%",
    width: "100%",
    backgroundColor: "#fdfdfd",
  },
  header: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 25,
  },
  subHeaderWrap: {
    width: "100%",
    top: 0,
    borderColor: "#ddd",
    paddingBottom: 15,
    justifyContent: "center",
  },
  subHeader: {
    width: "100%",
    paddingLeft: 15,
    borderColor: "#ddd",
    justifyContent: "center",
  },
  subHeaderText: {
    fontSize: 14,
    fontWeight: "600",
    padding: 10,
  },
  accountPrev: {
    width: "100%",
    // paddingLeft: 15,
    borderColor: "#ddd",
    // backgroundColor:"#f5f5f5",
    justifyContent: "center",
    alignContent: "center",
  },
  accountPrevWrap: {
    // width: 150,
    // top: 0,
    borderColor: "#ddd",
    paddingBottom: 15,
    justifyContent: "center",
    alignItems: "center",
  },
  accountPrevText: {
    fontSize: 14,
    fontWeight: "600",
    padding: 10,
    textTransform: "capitalize",
  },
  subContentsWrap: {
    width: "100%",
    borderColor: "#ddd",
    justifyContent: "center",
    marginTop: 10,
  },
  subContent: {
    width: "100%",
    borderColor: "#ececec",
    backgroundColor: "#fcfcfc",
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
    borderWidth: 1,
    padding: 15,
    paddingLeft: 20,
  },
  subContentText: {
    fontSize: 14,
    fontWeight: "400",
  },
  subContent1: {
    width: "100%",
    borderColor: "#f7f7f7",
    backgroundColor: "#fff",
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
    borderWidth: 1,
    padding: 15,
    paddingLeft: 20,
  },
  subContentText1: {
    fontSize: 14,
    fontWeight: "400",
  },
});

export default AccountSettings;