import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import ReceiptCard from "./Receipt";
import Modal from "react-native-modal";
const deviceWidth = Dimensions.get("window").width;

const ToShipCard = ({ cart }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [estimatedDate, setestimatedDate] = useState("");

  // Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
  const expectedShippingStartDateMin = new Date(
    cart.expectedShippingStartDateMin
  );
  const month = expectedShippingStartDateMin.toLocaleString("en-US", {
    month: "short",
  });
  const day = expectedShippingStartDateMin.getDate();
  const options = {
    year: "numeric",
    month: "short",
    day: "2-digit",
  };
  const options2 = {
    month: "short",
    day: "2-digit",
  };
  const time = expectedShippingStartDateMin.toLocaleString("en-US", {
    timeZone: "Asia/Manila",
    ...options2,
  });
  const expectedShippingStartDateMax = new Date(
    cart.expectedShippingStartDateMax
  );
  const total = parseFloat(cart?.total_amount);

  const time2 = expectedShippingStartDateMax.toLocaleString("en-US", {
    timeZone: "Asia/Manila",
    ...options,
  });

  // Format the day with leading zeros if needed (e.g., "01" instead of "1")
  const formattedDay = day < 10 ? `0${day}` : day;

  // Create the final formatted date string "Sept. 25"
  const philippinesTime = `${month}. ${formattedDay} `;
  function formatDate(input) {
    let date;

    // Check if the input is a Unix timestamp (number) or a string
    if (
      typeof input === "number" ||
      (typeof input === "string" && !isNaN(Number(input)))
    ) {
      date = new Date(Number(input) * 1000); // Convert string to number and then to milliseconds
    } else if (typeof input === "string") {
      date = new Date(input); // Try to create a Date object from the string
    } else {
      return "Invalid input";
    }

    // Check if the date is valid
    if (isNaN(date.getTime())) {
      return "Invalid date";
    }

    // Convert to local time
    const localDate = date.toLocaleString("en-PH", {
      timeZone: "Asia/Manila",
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      // hour: "2-digit",
      // minute: "2-digit",
      // hour12: false,
    });

    return localDate;
    // .replace(",", ""); // Removing the comma from the default format
  }
  useEffect(() => {
 // Assuming cart?.updatedAt holds a string in MongoDB updatedAt format
let updatedAtString = cart?.updatedAt; // Replace cart?.updatedAt with your actual value

if (updatedAtString) {
  // Convert the string to a JavaScript Date object
  let updatedAtDate = new Date(updatedAtString);

  // Calculate the 3rd day from the updatedAt date
  let thirdDay = new Date(updatedAtDate.getTime());
  thirdDay.setDate(updatedAtDate.getDate() + 3);

  // Calculate the 7th day from the updatedAt date
  let seventhDay = new Date(updatedAtDate.getTime());
  seventhDay.setDate(updatedAtDate.getDate() + 7);

  // Format the dates to local time in 'MM/DD/YYYY' format
  let formattedThirdDay = thirdDay.toLocaleDateString('en-US');
  let formattedSeventhDay = seventhDay.toLocaleDateString('en-US');

  // Display or use the formatted dates as needed
  console.log("3rd day from updatedAt:", formattedThirdDay);
  console.log("7th day from updatedAt:", formattedSeventhDay);
  setestimatedDate(formattedThirdDay+" - "+formattedSeventhDay )
} else {
  console.log("Invalid updatedAt date");
}

  }, [])
  

  return (
    <TouchableOpacity style={styles.container} onPress={()=> setModalVisible(true)}>
      <View style={styles.header}>
        <Text style={styles.headerText}>{cart.items[0].vendor_name}</Text>
        <Text style={styles.headerStatusText}>{cart.status}</Text>
      </View>
      <View style={styles.wrapper}>
        <View style={styles.prodwrapper}>
          <View style={styles.imgWrap}>
            <Image
              style={{ width: 50, height: 50, resizeMode: "cover" }}
              // source={{ uri: `${cart?.items[0].product.product_image}` }}
              source={{ uri: `${cart?.items[0].product.product_image !== ""?cart?.items[0].product.product_image:"https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"}` }}

            />
          </View>
          <View style={styles.details}>
            <Text style={styles.text} numberOfLines={2}>
              {cart?.items[0]?.product.name}
            </Text>
            <Text style={styles.text1} numberOfLines={2}>
              Variant:{cart?.items[0].variant}
            </Text>
            <View style={styles.rateCon}>
              {cart?.items[0].price ? (
                <>
                  <View style={styles.priceCon}>
                    <Text
                      style={
                        cart?.items[0]?.sale_price
                          ? styles.textPricePromo
                          : styles.textPrice
                      }
                    >
                      ₱{ parseFloat(cart?.items[0].price).toLocaleString('en-US')}
                    </Text>
                  </View>
                </>
              ) : (
                <Text>No price </Text>
              )}
              <Text style={styles.text1} numberOfLines={2}>
                Quantity: {cart?.items[0].quantity}
              </Text>
            </View>
          </View>
        </View>
        <View style={styles.totalCon}>
          <View style={styles.total}></View>
          <View style={styles.total}>
            <Text style={styles.totalText}>Total: </Text>
            <Text style={styles.textPrice}>
              {" "}
              ₱
              {parseFloat(total).toLocaleString("en-US") ??
                parseFloat(cart?.total_amount).toLocaleString("en-US")}{" "}
            </Text>
          </View>
        </View>
      </View>
      {/* <View style={styles.cStatus}>
        <Text style={styles.textStatusHeader}> Status: </Text>

        <Text style={styles.textStatus}> {cart?.currentStatus}</Text>
      </View> */}
      <View style={styles.footer}>
        <Text style={styles.footerDate}>
          Ship by: {estimatedDate}{" "}
        </Text>

        <TouchableOpacity style={styles.rateBtn}>
          <Text style={styles.rateText}> </Text>
        </TouchableOpacity>
      </View>
      <Modal
        animationType="slide"
        animationIn={"zoomIn"}
        transparent={true}
        isVisible={modalVisible}
        onSwipeComplete={() => setModalVisible(false)}
        swipeDirection={["down","up","right","left"]}
        swipeThreshold="100"
        backdropOpacity={0.2}
        style={{ margin: 0 }}
        propagateSwipe={true}
        deviceWidth={deviceWidth}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <ReceiptCard onRequestClose={setModalVisible} cart={cart} />
      </Modal>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  container: {
    // width: "95%",
    margin: 5,
    borderRadius: 10,
    borderColor: "#dddd",
    // borderColor#1818186cddd",
// 
    borderWidth: 1,
    overflow: "hidden",
    // flexDirection: "row",
    // padding: 10,
    backgroundColor: "#ffffff",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    top: 0,
    padding: 10,
  },
  headerText: {
    fontSize: 14,
    fontWeight: "600",
  },
  headerStatusText: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "uppercase",
    color: "#ffaa00",
  },
  footer: {
    // position: "absolute",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    bottom: 0,
    width: "100%",
  },
  imgWrap: {
    padding: 10,
  },
  wrapper: {
    margin: 10,
    marginBottom: 10,
  },
  prodwrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderWidth: 1,
    overflow: "hidden",
    borderColor: "#dddd",
    borderRadius: 10,
    padding: 10,
  },
  priceCon: {
    flexDirection: "row",
    paddingVertical: 10,
  },
  textPrice: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#ffaa00",
  },
  textPricePromo: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  details: {
    width: "80%",
  },
  text: {
    fontSize: 13,
  },
  text1: {
    fontSize: 10,
    color: "#b4b4b4",
  },
  totalCon: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
    position: "relative",
    // right: 0,
    paddingTop: 10,
  },
  total: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
    width: "35%",
    position: "relative",
    right: 0,
  },
  totalText: {
    textAlign: "right",
  },
  cStatus: {
    backgroundColor: "#7EFFBA",
    // height: 40,
    padding: 10,
    flexDirection: "row",
    // justifyContent: "space-between",
    alignItems: "flex-end",
  },
  textStatusHeader: {
    fontSize: 12,
    fontWeight: "600",
    color: "#007938",
  },
  textStatus: {
    fontSize: 14,
    fontWeight: "400",
    color: "#007938",
  },
  rateBtn: {
    borderWidth: 2,
    overflow: "hidden",
    borderColor: "#fffefd",
    borderRadius: 10,
    padding: 5,
    paddingHorizontal: 15,
    margin: 10,
    marginRight: 20,
  },
  rateText: {
    fontWeight: "600",
    color: "#ff3c00",
  },
  footerDate: {
    fontSize: 11,
    paddingLeft: 15,
    color: "#747474",
  },
});

export default ToShipCard;