import React, { useState } from "react";
import {
  View,
  StyleSheet,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { globalStyles } from "../../styles/globalStyles";

var winWidth = Dimensions.get("window").width; //full width
var winHeight = Dimensions.get("window").height;

const ItemProductSave = ({ product }: { product: any }) => {
  function formatCurrency(a: number | string): string {
    let b = parseFloat(a.toString())
      .toFixed(2)
      .replace(/(\d)(?=(\d{3})+\.)/g, "$1.")
      .toString();
    var len = b.length;
    b = b.substring(0, len - 3);
    return b;
  }

  return (
    <View style={styles.productItem}>
      <TouchableOpacity style={styles.productImage}>
        <Image
          source={{ uri: product.productImage.large }}
          style={styles.productImg}
          alt={product.productName}
        />
        <View style={styles.iconSave}>
          <Image
            source={require("../../../assets/images/icon_heart.png")}
            style={styles.imgsave}
            alt="icon-heart"
            resizeMode="contain"
          />
        </View>
      </TouchableOpacity>
      <View>
        <TouchableOpacity>
          <Text numberOfLines={2} style={styles.productName}>
            {product.productName}
          </Text>
        </TouchableOpacity>
        <View style={styles.BoxPriceRating}>
          <View style={globalStyles.boxFlex}>
            <Text style={styles.price}>{formatCurrency(product.price)}đ</Text>
            <Text style={styles.oldPrice}>
              {formatCurrency(product.oldPrice)}đ
            </Text>
          </View>
        </View>
        <View style={styles.boxStore}>
          <View style={styles.boxIconStore}>
            <Image
              source={require("../../../assets/images/icon_store_white.png")}
              style={styles.iconStore}
              alt="icon store"
              resizeMode="contain"
            />
          </View>
          <Text style={styles.storeName}>
            Có {product.toltalStore} cửa hàng bán
          </Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  productItem: {
    width: winWidth / 2 - 15,
  },
  productImage: {
    width: "100%",
    height: 200,
    position: "relative",
    marginBottom: 5,
    borderWidth: 1,
    borderColor: "#d3d3d3",
    backgroundColor: "#fff",
    borderRadius: 8,
    overflow: "hidden",
  },
  productImg: {
    width: "100%",
    height: "100%",
    objectFit: "contain",
  },
  iconSave: {
    position: "absolute",
    right: 5,
    top: 5,
    width: 16,
    height: 13,
    zIndex: 9,
  },
  imgsave: {
    width: "100%",
    objectFit: "contain",
    margin: "auto",
  },
  productName: {
    fontWeight: 700,
    fontSize: 14,
    color: "#000",
    marginBottom: 5,
  },
  summary: {
    marginTop: 5,
    color: "#595959",
  },
  locahostPro: {
    flexDirection: "row",
    alignItems: "center",
  },
  iconMap: {},
  BoxPriceRating: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
  },
  price: {
    fontSize: 15,
    fontWeight: "bold",
    color: "#d80a00",
    marginRight: 10,
  },
  oldPrice: {
    fontSize: 13,
    textDecorationLine: "line-through",
    color: "#595959",
    fontWeight: "bold",
  },
  iconReviewRating: {
    width: 58,
    height: 11,
    marginBottom: 2,
  },
  boxStore: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 10,
  },
  boxIconStore: {
    width: 24,
    height: 24,
    borderRadius: 25,
    backgroundColor: "#FF7A00",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 5,
  },
  iconStore: {
    width: 18,
    height: 18,
  },
  storeName: {
    fontSize: 13,
    fontWeight: "bold",
    color: "#000",
  },
});

export default ItemProductSave;