import { faHeart, faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
  Image,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import CheckBox from "expo-checkbox";
import { get_product } from "../../../services/api/controllers/product";
const ProductCard = ({ product, like, index, liked, all }) => {
  const navigation = useNavigation();
  // console.log(product );
  const [variablePrice, setvariablePrice] = useState("");

  const [isChecked, setIsChecked] = useState(false);
  const [error, setError] = useState(false);

  const getProd = (idP) => {
    console.log(idP);
    get_product({
      id: idP,
    })
      .then((result) => {
        //  console.log("result" + result);
        if (result.data.product_type === "variation") {
          get_product({
            id: result.data.parent_id,
          })
            .then((result1) => {
              //  console.log("result" + result);

              if (result1.error) {
                setError(result1.error);
              } else {
                // setcart(result.data);
                navigation.navigate("Product", { product: result1.data });
                console.log(result1.data);
              }
            })
            .catch((error) => {
              setError(error.message);
            })
            .finally(() => {
              // set
            });
        } else {
          if (result.error) {
            setError(result.error);
          } else {
            // setcart(result.data);
            navigation.navigate("Product", { product: result.data });
            console.log(result.data);
          }
        }
      })
      .catch((error) => {
        setError(error.message);
      })
      .finally(() => {
        // setprodIsLoading(false); // Set loading to false when done loading
      });
  };
  // useEffect(() => {
  // setactiveProduct(product);
  // const purch = productList?.filter(
  //   (item) => item?.parent_id === product._id
  // );
  // // setvariations(purch);

  //   function getLowestHighestPrice(variation) {
  //     let lowestPrice = Infinity;
  //     let highestPrice = -Infinity;
  //     let hasPrice = false;

  //     variation?.forEach((item) => {
  //       let price = null;

  //       // If sale_price is available and not an empty string, use it; otherwise, use regular_price
  //       if (item?.sale_price && item?.sale_price !== "") {
  //         price = parseFloat(item?.sale_price);
  //       } else if (item?.regular_price && item?.regular_price !== "") {
  //         price = parseFloat(item?.regular_price);
  //       }

  //       // Update lowest and highest prices
  //       if (price !== null) {
  //         hasPrice = true;
  //         lowestPrice = Math.min(lowestPrice, price);
  //         highestPrice = Math.max(highestPrice, price);
  //       }
  //     });

  //     if (!hasPrice) {
  //       return null;
  //     }

  //     // If lowest and highest prices are the same, return that price alone
  //     if (lowestPrice === highestPrice) {
  //       return `${lowestPrice}`;
  //     }

  //     // Return the range of lowest to highest prices
  //     return `${lowestPrice}-${highestPrice}`;
  //   }
  //   const priceRange = getLowestHighestPrice(purch);
  //   setvariablePrice(priceRange);
  //   console.log("-----------------------Price Range:", priceRange);
  // }, [isFocused]);
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={styles.container}
      onPress={() => getProd(product._id)}
    >
      <View style={styles.upper}>
        <Image
          style={{ width: "100%", height: 200, resizeMode: "cover" }}
          source={{ uri: `${product.product_image}` }}
        />
        <View style={styles.heart}>
          <CheckBox
            value={liked.includes(index) || all === true}
            onValueChange={() => like(index)}
          />
        </View>
      </View>

      <View style={{ padding: 10, backgroundColor: "#fff" }}>
        <Text style={styles.text} numberOfLines={2}>
          {product?.product_name}
        </Text>

        <View style={styles.priceCon}>
          <Text
            style={
              product.sale_price ? styles.textPricePromo : styles.textPrice
            }
          >
            {product?.regular_price && product?.regular_price !== null ? (
              "₱" + parseFloat(product?.regular_price).toLocaleString("en-US")
            ) : (
              <TouchableOpacity style={styles.inquire}>
                <Text style={styles.inquire}>Inquire for price</Text>
              </TouchableOpacity>
            )}
          </Text>
          {product.sale_price ? (
            <Text style={styles.textPrice}>
              {" "}
              {/* {(product.regular_price * (1 - product.promo / 100)).toFixed(2) }{" "} */}
              {parseFloat(product?.sale_price).toLocaleString("en-US")}
              {/* <Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text> */}
            </Text>
          ) : null}
        </View>

        <View style={styles.footer}>
          {/* <Text style={styles.textMin}>
            min. order: {product?.min} {product?.per}
          </Text> */}
          <Text style={styles.textMin}>stock: {product.stock}</Text>
          <Text style={styles.textSold}>{product?.sold} sold</Text>
        </View>
        {product?.rate ? (
          <View style={styles.rateCon}>
            <FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
            <Text style={styles.textRate}>
              {product.rate} ({product?.raterTotal})
            </Text>
          </View>
        ) : null}
      </View>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // backgroundColor: "#ff3333",
    width: "95%",
    margin: 5,
    borderRadius: 6,
    borderColor: "#dddd",
    overflow: "hidden",
  },
  wrapper: {
    width: "100%",
    //   height: 200,
    alignItems: "center",
    justifyContent: "center",
    // backgroundColor: "#ffaa00",
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
  },
  upper: {},
  heart: {
    position: "absolute",
    top: 10,
    right: 10,
    height: 20,
    width: 20,
  },
  text: {
    fontSize: 13,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#333",
    letterSpacing: 0.5,
  },
  inquire: {
    fontSize: 16,
    fontWeight: "600",
    // textTransform: "capitalize",
    // textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  priceCon: {
    flexDirection: "row",
    paddingVertical: 4,
  },
  textPrice: {
    fontSize: 16,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#ffaa00",
  },
  textPricePromo: {
    fontSize: 16,
    fontWeight: "600",
    textTransform: "capitalize",
    textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  textMin: {
    fontSize: 11,
    fontWeight: "600",
    // textTransform: "capitalize",
    color: "#bdbdbd",
  },
  textSold: {
    fontSize: 11,
    fontWeight: "600",
    // textTransform: "capitalize",
    color: "#bdbdbd",
  },
  rateCon: {
    flexDirection: "row",
    // justifyContent:'center',
    alignItems: "center",
    paddingVertical: 3,
  },
  textRate: {
    fontSize: 12,
    color: "#838383",
  },
  img: {
    width: 400,
    height: 200,
    resizeMode: "cover",
    margin: "auto",
    borderRadius: 10,
    // backgroundColor: "#ffaa00",
  },
  footer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
});
export default ProductCard;