import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  Dimensions,
} from "react-native";

import ReceiptCard from "./Receipt";
import Modal from "react-native-modal";
import ReturnForm from "./ReturnForm";
const deviceWidth = Dimensions.get("window").width;
const CompletedCard = ({ cart }) => {
  // Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
  const [modalVisible, setModalVisible] = useState(false);
  const [modalVisible1, setModalVisible1] = useState(false);
  const [isRefund, setisRefund] = useState(false);
  console.log(cart);

  const deliveryDate = new Date(cart?.shipping?.delivery_date);
  const month = deliveryDate.toLocaleString("en-US", { month: "short" });
  const day = deliveryDate.getDate();
  const options = {
    year: "numeric",
    month: "short",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  };
  const time = deliveryDate.toLocaleString("en-US", {
    timeZone: "Asia/Manila",
    ...options,
  });
  const total = parseFloat(cart?.total_amount);
  console.log(cart?.return_order);

  // 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} `;

  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}> {time ?? ""} </Text>
        {/* {
          cart?.return_order === null ? (
            <TouchableOpacity
              style={styles.rateBtn}
              onPress={() => setModalVisible1(true)}
            >
              <Text style={styles.rateText}> Return </Text>
            </TouchableOpacity>
          ) :  null
        } */}
        {isRefund === false ? (
          <>
            {cart?.return_order === undefined ? (
              <TouchableOpacity
                style={styles.rateBtn}
                onPress={() => setModalVisible1(true)}
              >
                <Text style={styles.rateText}> Return </Text>
              </TouchableOpacity>
            ) : (
              <Text style={styles.rateText1}> Refund Requested </Text>
            )}
          </>
        ) : (
          <Text style={styles.rateText1}>Refund Requested </Text>
        )}
      </View>
      <Modal
        animationType="slide"
        animationIn={"zoomIn"}
        transparent={true}
        isVisible={modalVisible1}
        onSwipeComplete={() => setModalVisible1(false)}
        swipeDirection={["down", "up", "right", "left"]}
        swipeThreshold="100"
        backdropOpacity={0.2}
        style={{ margin: 0 }}
        propagateSwipe={true}
        deviceWidth={deviceWidth}
        onRequestClose={() => {
          setModalVisible1(!modalVisible1);
        }}
      >
        <ReturnForm
          onRequestClose={setModalVisible1}
          cart={cart}
          setisRefund={setisRefund}
        />
      </Modal>
      <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",
    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: "#ffaa00",
    borderRadius: 10,
    padding: 5,
    paddingHorizontal: 15,
    margin: 10,
    marginRight: 20,
  },
  rateText: {
    fontWeight: "600",
    color: "#ffaa00",
  },
  rateText1: {
    fontWeight: "600",
    color: "#ffaa00",
    marginVertical: 15,
    marginRight: 15,
  },
  footerDate: {
    fontSize: 11,
    paddingLeft: 15,
    color: "#747474",
  },
});

export default CompletedCard;