import React,{useContext} from "react";
import { faCartPlus, faSearchPlus } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {GlobalCartContext} from '../context/CartContext';
import {  useToasts } from 'react-toast-notifications';
import {v4 as uuidv4} from 'uuid';
import "../styles/Product.scss";



export default function Product(props) {
  const { addToast } = useToasts();
  
  
  const {addItemTocart}= useContext(GlobalCartContext)
  
  function  handleAddToCart(data) {
   
    
    const newCartItem={
      productname: data.productname,
      cartItemId: uuidv4(),
      id: data.id,
      price: data.price,
      discount: data.discount,
      color: data.color,
      size: data.size,
      selectedSize:data.size[0],
      product_status: data.product_status,
      product_stock: data.product_stock,
      product_selected_qty:1,
      product_image: data.product_image,
      brand: data.brand,
  
      product_details: data.product_details


    }
    addItemTocart(newCartItem);
    addToast(data.productname+" successfully added to your cart", { appearance: 'success', autoDismiss: true, })
   
  }
  
  const productLevel = props.data.product_stock;
  let bannerStockLevel = "";
  let stockLevelMessage = "";
  let product_name = props.data.productname.replace(/ /g, "_");
  
  if (productLevel > 0 && productLevel < 100) {
    bannerStockLevel = "product-banner-stock-level-low";
    stockLevelMessage = `Low stock, only ${productLevel} left.`;
  } else if (productLevel === 0) {
    bannerStockLevel = "product-banner-stock-level-out-of-stock";
    stockLevelMessage = `Out of  stock`;
  }
  
 
  return (
    <div className="col-lg-3 col-md-4 col-sm-6  col-product-container">
      <div className="card-product">
        <img
          className="card-img-top"
          src={require("../assets/products/allproducts/" +
            props.data.product_image)}
          alt={props.data.product_image}
        />

        <div
          className={`${
            props.data.product_status === "New"
              ? "product-banner-new"
              : "product-banner-trending"
          }`}
        >
          {props.data.product_status}
        </div>
        <div className={bannerStockLevel}>{stockLevelMessage}</div>
        <div className="card-body">
          <h2 className="card-title">
            {props.data.productname}</h2>
          <div className="row">
            <div className="col-lg-7  col-md-6 col-sm-6">
              {props.data.discount > 0 ? (
                <h3>
                  {" "}
                  <span className="product-price-after-discount">
                    
                    {
                      
                    new Intl.NumberFormat('en-US', {style: 'currency', currency:'ZAR'}).format( props.data.price -  (props.data.price * props.data.discount / 100)
                    )
                  
                  }
                  </span>{" "}
                  <span className="product-price-before-discount">
                    {" "}
                    {
                 
                    new Intl.NumberFormat('en-US', {style: 'currency', currency:'ZAR'}).format(  props.data.price) 
                    }
                           
                  </span>{" "}
                  <span className="product-discount-rate">
                    -{props.data.discount}%{" "}
                  </span>
                </h3>
              ) : (
                <h3>
                  {" "}
                  <span className="product-price-whit-no-discount">
                    {
                 
                    new Intl.NumberFormat('en-US', {style: 'currency', currency:'ZAR'}).format(  props.data.price) 
                    }
                  </span>
                </h3>
              )}
            </div>
            <div className="col-lg-5 col-md-6 col-sm-6 ">
              <div className="card-product-action-icons">
                {props.data.product_stock >=1 ?
                <span
                  name="id"
                  value={props.data.id}
                  className="card-product-action-cart-icon add-to-cart-icon"
                  
                  onClick={ () => handleAddToCart(props.data)}
                >
         
                  <FontAwesomeIcon 
                  icon={faCartPlus}
                 
                   />
                </span>
                :""}

                <span>
                  <a
                    href={`/catalog/item/${props.data.id}/${product_name}/view`}
                    className="card-product-action-cart-icon"
                  >
                    <FontAwesomeIcon icon={faSearchPlus} />
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}