import {
  faAngleDown,
  faArrowLeft,
  faCheck,
  faPlus,
  faTrash,
} 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,
  useRoute,
} from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";

import SelectDropdown from "react-native-select-dropdown";
import { useToast } from "react-native-toast-notifications";
import { user } from "../../constants/user";
import {
  get_customer,
  update_customer,
} from "../../services/api/controllers/customers";

const Addresses = () => {
  const navigation = useNavigation();
  const [selected, setselected] = useState(0);
  const [error, seterror] = useState(0);

  const [addreses, setaddreses] = useState([]);
  const [addresesNew, setaddresesNew] = useState([]);
  const [refresh, setrefresh] = useState(false);
  const route = useRoute();
  const toast = useToast();
  const isFocused = useIsFocused();
  const isrefresh = route.params.isrefresh ? route.params.isrefresh : null;
  console.log("address " + addreses.length);

  const [user, setuser] = useState([]);
  useEffect(() => {
    /* ---------------Check for the user saved email--------------- */
  }, []);
  useEffect(() => {
    setrefresh(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 {
              setaddreses(result.data.address);
            }
          })
          .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(() => {
    setrefresh(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 {
              setaddreses(result.data.address);
            }
          })
          .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);
  }, [isFocused]);
  const setBilling = (index) => {
    const address = addreses;

    for (let i = 0; i < address.length; i++) {
      if (i === index) {
        // If it's the index to update, toggle the billing value
        address[i].billing = !address[i].billing;
      } else {
        // If it's not the index to update, set billing to false
        address[i].billing = false;
      }
    }

    update_customer({
      id: user[0]._id,

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

        if (result.error) {
          seterror(result.error);
        } else {
          setaddreses(result.data.address);
          toast.show("Successfully changed the Billing Address!", {
            type: "success",
            placement: "top",
            duration: 2000,
            offset: 30,
            animationType: "slide-in",
          });
        }
      })
      .catch((error) => {
        // setError(error.message);
        console.log(error.message);
      })
      .finally(() => {
        // setprodIsLoading(false); // Set loading to false when done loading
      });
  };
  const setShipping = (index) => {
    const address = addreses;

    for (let i = 0; i < address.length; i++) {
      if (i === index) {
        // If it's the index to update, toggle the shipping value
        address[i].shipping = !address[i].shipping;
      } else {
        // If it's not the index to update, set shipping to false
        address[i].shipping = false;
      }
    }
    update_customer({
      id: user[0]._id,

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

        if (result.error) {
          seterror(result.error);
        } else {
          setaddreses(result.data.address);
          toast.show("Successfully changed the Shipping Address!", {
            type: "success",
            placement: "top",
            duration: 2000,
            offset: 30,
            animationType: "slide-in",
          });
        }
      })
      .catch((error) => {
        // setError(error.message);
        console.log(error.message);
      })
      .finally(() => {
        // setprodIsLoading(false); // Set loading to false when done loading
      });
  };
  const removeAddress = (indexToRemove) => {
    let address = addreses;
    if (indexToRemove >= 0 && indexToRemove < address.length) {
      address.splice(indexToRemove, 1); // This will remove one element at the specified index
      // If you want to remove more than one element, you can change the second argument (1 in this case) to the number of elements you want to remove.
    }
    update_customer({
      id: user[0]._id,

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

        if (result.error) {
          seterror(result.error);
        } else {
          setaddreses(result.data.address);
          toast.show("Successfully deleted the address!", {
            type: "danger",
            placement: "top",
            duration: 2000,
            offset: 30,
            animationType: "slide-in",
          });
        }
      })
      .catch((error) => {
        // setError(error.message);
        console.log(error.message);
      })
      .finally(() => {
        // setprodIsLoading(false); // Set loading to false when done loading
      });
  };
  // useEffect(() => {
  //   get_customer({
  //     id: user[0]?._id,
  //   })
  //     .then((result) => {
  //       // console.log(result.data);

  //       if (result.error) {
  //         seterror(result.error);
  //       } else {
  //         setaddreses(result.data.address);

  //         // 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
  //     });
  // }, []);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.backIcon}
        >
          <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
        </TouchableOpacity>
        <Text style={styles.headerText}>My Address</Text>
      </View>
      <ScrollView>
        <View style={styles.wrapper}>
          {addreses?.map((add, i) => (
            <View style={styles.add} key={i}>
              <View
                key={i}
                style={styles.listItem}
                // onPress={() => setselected(i)}
              >
                <View style={styles.listleft}>
                  <View style={styles.listtop}>
                    <Text style={styles.listItemText}>Recipient: </Text>
                    <Text style={styles.listItemTextPrice}>
                      {add.first_name} {add.last_name}, {add.phone}
                    </Text>
                  </View>
                  <Text style={styles.listItemText}>Address:</Text>
                  <Text style={styles.listItemTexteta} numberOfLines={4}>
                    {" "}
                    {add.address_1 +
                      " " +
                      add.address_2 +
                      ", " +
                      add.barangay +
                      ", " +
                      add.city +
                      ", " +
                      add.province +
                      " "}
                    {add.country === "PH" ? "Philippines" : add.country}
                  </Text>
                </View>
                <TouchableOpacity onPress={() => removeAddress(i)}>
                  <FontAwesomeIcon icon={faTrash} color={"#696969"} size={18} />
                </TouchableOpacity>
              </View>
              <View style={styles.btnBot}>
                <TouchableOpacity
                  onPress={() => setBilling(i)}
                  style={
                    add.billing === false ? styles.select : styles.selectActive
                  }
                >
                  <Text style={styles.selectBtnText}>Billing</Text>
                  {add.billing === true ? (
                    <FontAwesomeIcon
                      icon={faCheck}
                      color={"#d4c600"}
                      size={20}
                    />
                  ) : null}
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => setShipping(i)}
                  style={
                    add.shipping === false ? styles.select : styles.selectActive
                  }
                >
                  <Text style={styles.selectBtnText}>Shipping</Text>

                  {add.shipping === true ? (
                    <FontAwesomeIcon
                      icon={faCheck}
                      color={"#d4c600"}
                      size={20}
                    />
                  ) : null}
                </TouchableOpacity>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <TouchableOpacity
          style={styles.footerBtn}
          onPress={() =>
            navigation.navigate("AddressCreate", {
              isrefresh: !refresh,
              address: addreses ?? [],
            })
          }
        >
          <Text style={styles.footerBtnText}>Add New Address</Text>
          <FontAwesomeIcon icon={faPlus} color={"#ffff"} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffff",
    width: "100%",
    height: "100%",
    paddingBottom: 60,
  },
  wrapper: {
    height: "90%",
    width: "100%",
    // marginBottom:80
  },
  wrap: {
    height: "100%",
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    paddingTop: 30,
  },
  header: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 25,
  },
  wrapper: {
    // height: "85%",
    paddingTop: 25,
    width: "100%",
    // justifyContent: "center",
    alignItems: "center",
    // height: "100%",
  },
  add: {
    margin: 5,
  },
  content: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  listItem: {
    backgroundColor: "#ffffff",

    width: "100%",
    borderWidth: 1,
    borderColor: "#ececec",
    padding: 15,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  listleft: {
    width: "93%",
  },
  listtop: {
    flexDirection: "row",
    paddingBottom: 10,
  },
  listItemText: {
    fontSize: 16,

    fontWeight: "600",
  },
  listItemTextPrice: {
    fontSize: 16,
    fontWeight: "600",
    color: "#696969",
    marginLeft: 10,
  },
  listItemTexteta: {
    fontSize: 14,
    marginTop: 5,
    fontWeight: "500",
    color: "#818181",
    marginLeft: 10,
  },
  footer: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 10,
  },
  footerBtn: {
    backgroundColor: "#ff5e00",
    width: "90%",
    borderRadius: 20,
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
  },
  footerBtnText: {
    color: "#fff",
    fontSize: 16,
    marginRight: 10,
  },
  selectBtnText: {
    color: "#929292",
    fontSize: 15,
    marginRight: 10,
    letterSpacing: 0.6,
  },
  select: {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    width: "49%",
    paddingVertical: 10,
    borderWidth: 2,
    borderColor: "#dddddd",
    backgroundColor: "#f0f0f0",
  },
  selectActive: {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    width: "49%",
    paddingVertical: 10,
    borderWidth: 2,
    borderColor: "#ffaa00",
    fontWeight: "600",
  },
  btnBot: {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
  },
});

export default Addresses;