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

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

const ItemProduct = ({ 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.boxSaleoff}>
          <View style={styles.beforeSaleoff}></View>
          <Text style={styles.saleoffText}>{product.saleOff}</Text>
        </View>
      </TouchableOpacity>
      <View>
        <TouchableOpacity>
          <Text numberOfLines={2} style={styles.productName}>
            {product.productName}
          </Text>
        </TouchableOpacity>
        <View style={styles.BoxPriceRating}>
          <View>
            <Text style={styles.price}>{formatCurrency(product.price)}đ</Text>
            <Text style={styles.oldPrice}>
              {formatCurrency(product.oldPrice)}đ
            </Text>
          </View>
          <View>
            <Image
              source={
                product.review.rate !== undefined
                  ? require(`../../../assets/images/icon_star_${product.review.rate}.png`)
                  : require("../../../assets/images/icon_star_0.png")
              }
              style={styles.iconReviewRating}
              alt="icon review"
              resizeMode="contain"
            />
          </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 - 20,
    marginRight: 10,
    marginBottom: 10,
    padding: 12,
  },
  productImage: {
    width: winWidth / 2 - 20,
    height: 150,
    position: "relative",
    marginBottom: 5,
    borderWidth: 1,
    borderColor: "#d3d3d3",
    backgroundColor: "#fff",
    borderRadius: 8,
  },
  productImg: {
    width: "100%",
    height: "100%",
    objectFit: "contain",
  },
  boxSaleoff: {
    position: "absolute",
    right: 10,
    top: 10,
    width: 35,
    height: 35,
    borderRadius: 25,
    backgroundColor: "#da251c",
    justifyContent: "center",
    alignItems: "center",
  },
  beforeSaleoff: {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: [{ translateY: "-50%" }, { translateX: "-50%" }],
    width: 30,
    height: 30,
    borderWidth: 1,
    borderStyle: "dashed",
    borderColor: "#fff",
    borderRadius: 25,
  },
  saleoffText: {
    fontSize: 8,
    fontWeight: 700,
    backgroundColor: "#da251c",
    borderRadius: 25,
    color: "#fff",
    paddingLeft: 2,
  },
  productName: {
    fontWeight: 700,
    fontSize: 13,
    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",
  },
  oldPrice: {
    fontSize: 13,
    textDecorationLine: "line-through",
    color: "#595959",
    fontWeight: "bold",
  },
  iconReviewRating: {
    width: 58,
    height: 11,
    marginBottom: 2,
  },
  boxStore: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 5,
  },
  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 ItemProduct;