mm.com.tm-frontend/src/components/ProductCard/index.jsx

import { useState, useEffect } from "react";
import styles from "./ProductCard.module.scss";
import { IoMdHeartEmpty, IoMdHeart } from "react-icons/io";
import { FaShoppingCart } from "react-icons/fa";
import { useNavigate } from "react-router-dom";
import {
  useAddFavoriteMutation,
  useRemoveFavoriteMutation,
  useGetFavoritesQuery,
} from "../../app/api/favoritesApi";
import {
  useAddToCartMutation,
  useUpdateCartItemMutation,
  useRemoveFromCartMutation,
} from "../../app/api/cartApi";
import { Modal } from "antd";
import { useTranslation } from "react-i18next";
import { DecreaseIcon, IncreaseIcon } from "../Icons";
import ImageCarousel from "./imageCarousel/index";
import { useCart } from "../../app/api/useCart";

const truncateDescription = (htmlString, maxLength = 80) => {
  const tempDiv = document.createElement("div");
  tempDiv.innerHTML = htmlString;
  const textContent = tempDiv.textContent || tempDiv.innerText || "";
  return textContent.length > maxLength
    ? textContent.substring(0, maxLength).trim() + "..."
    : textContent;
};

const isPriceZero = (price) => !price || parseFloat(price) === 0;

const ProductCard = ({
  product,
  showAddToCart = true,
  showFavoriteButton = true,
  onAddToCart,
  onToggleFavorite,
  isFavorite = false,
  descriptionMaxLength = 85,
}) => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const [stockErrorModalVisible, setStockErrorModalVisible] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  const [addFavorite] = useAddFavoriteMutation();
  const [removeFavorite] = useRemoveFavoriteMutation();
  const { data: favoriteProducts = [] } = useGetFavoritesQuery();

  const [localIsFavorite, setLocalIsFavorite] = useState(
    favoriteProducts.some((fav) => fav.product?.id === product.id)
  );

  const { getCartItem } = useCart();
  const [addToCart] = useAddToCartMutation();
  const [updateCartItem] = useUpdateCartItemMutation();
  const [removeFromCart] = useRemoveFromCartMutation();

  const cartItem = getCartItem(product.id);
  const [localQuantity, setLocalQuantity] = useState(0);
  const [pendingQuantity, setPendingQuantity] = useState(0);

  const { name, price_amount, old_price_amount, media = [], reviews } = product;

  const truncatedDesc = truncateDescription(product.description, descriptionMaxLength);

  const calculatedDiscount =
    !product.discount &&
    old_price_amount &&
    price_amount &&
    old_price_amount > price_amount
      ? Math.round(((old_price_amount - price_amount) / old_price_amount) * 100)
      : null;

  useEffect(() => {
    const qty = parseInt(cartItem?.quantity || cartItem?.product_quantity || 0, 10);
    setLocalQuantity(qty);
    setPendingQuantity(qty);
  }, [cartItem]);

  useEffect(() => {
    if (Array.isArray(favoriteProducts)) {
      setLocalIsFavorite(
        favoriteProducts.some((fav) => fav.product?.id === product.id)
      );
    }
  }, [favoriteProducts, product.id]);

  useEffect(() => {
    const serverQty = parseInt(cartItem?.quantity || cartItem?.product_quantity || 0, 10);

    if (pendingQuantity === serverQty || pendingQuantity <= 0) return;

    const handler = setTimeout(async () => {
      try {
        setIsLoading(true);
        await updateCartItem({ productId: product.id, quantity: pendingQuantity }).unwrap();
      } catch {
        setLocalQuantity(serverQty);
        setPendingQuantity(serverQty);
      } finally {
        setIsLoading(false);
      }
    }, 500);

    return () => clearTimeout(handler);
  }, [pendingQuantity, cartItem, product.id, updateCartItem]);

  const handleCardClick = () => navigate(`/product/${product.id}`);

  const handleAddToCart = async (event) => {
    event.preventDefault();
    event.stopPropagation();

    if (product.stock <= 0) {
      setStockErrorModalVisible(true);
      return;
    }

    setLocalQuantity((prev) => prev + 1);
    setPendingQuantity((prev) => prev + 1);

    try {
      await addToCart({ productId: product.id, quantity: 1 }).unwrap();
    } catch {
      setLocalQuantity((prev) => prev - 1);
      setPendingQuantity((prev) => prev - 1);
    }
  };

  const handleQuantityIncrease = (event) => {
    event.preventDefault();
    event.stopPropagation();

    if (isLoading) return;

    if (localQuantity >= product.stock) {
      setStockErrorModalVisible(true);
      return;
    }

    setLocalQuantity((prev) => prev + 1);
    setPendingQuantity((prev) => prev + 1);
  };

  const handleQuantityDecrease = (event) => {
    event.preventDefault();
    event.stopPropagation();

    if (isLoading) return;

    if (pendingQuantity <= 1) {
      setPendingQuantity(0);
      setLocalQuantity(0);
      setIsLoading(true);

      removeFromCart({ productId: product.id })
        .unwrap()
        .catch(() => {
          setLocalQuantity(1);
          setPendingQuantity(1);
        })
        .finally(() => setIsLoading(false));
    } else {
      setLocalQuantity((prev) => prev - 1);
      setPendingQuantity((prev) => prev - 1);
    }
  };

  const handleToggleFavorite = async (event) => {
    event.preventDefault();
    event.stopPropagation();

    if (isLoading) return;

    setIsLoading(true);
    setLocalIsFavorite((prev) => !prev);

    try {
      if (localIsFavorite) {
        await removeFavorite(product.id).unwrap();
      } else {
        await addFavorite(product.id).unwrap();
      }
    } catch {
      setLocalIsFavorite((prev) => !prev); // revert
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <div
        className={styles.productCard}
        onClick={handleCardClick}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <div className={styles.imageContainer}>
          {(product.discount > 0 || calculatedDiscount > 0) && (
            <span className={styles.discountBadge}>
              -{product.discount || calculatedDiscount}%
            </span>
          )}
          {product.stock === 0 && (
            <span className={`${styles.discountBadge} ${styles.outOfStock}`}>
              {t("common.out_of_stock")}
            </span>
          )}
          <ImageCarousel images={media} altText={name} isHovered={isHovered} />
        </div>

        <div className={styles.productInfo}>
          <h3 className={styles.productName}>{name}</h3>
          <p className={styles.productDescription}>{truncatedDesc}</p>

          <div className={styles.priceContainer}>
            <div>
              {isPriceZero(price_amount) ? (
                <span className={styles.currentPrice}> {t("cart.pendingPriceTitle")}</span>
              ) : (
                <>
                  <span className={styles.currentPrice}>{price_amount} m.</span>
                  {old_price_amount && (
                    <span className={styles.oldPrice}>{old_price_amount} m.</span>
                  )}
                </>
              )}
            </div>
          </div>
        </div>

        <div className={styles.actions}>
          {showFavoriteButton && (
            <button
              className={styles.favoriteButton}
              onClick={handleToggleFavorite}
              disabled={isLoading}
            >
              {localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
            </button>
          )}

          {showAddToCart && (
            <>
              {localQuantity > 0 ? (
                <div className={styles.quantityControls}>
                  <button
                    onClick={handleQuantityDecrease}
                    className={styles.quantityBtn}
                    disabled={isLoading}
                  >
                    <DecreaseIcon />
                  </button>
                  <span>{localQuantity}</span>
                  <button
                    onClick={handleQuantityIncrease}
                    className={styles.quantityBtn}
                    disabled={isLoading}
                  >
                    <IncreaseIcon />
                  </button>
                </div>
              ) : (
                <button
                  className={styles.addToCartButton}
                  onClick={handleAddToCart}
                  disabled={isLoading || product.stock === 0}
                >
                  <FaShoppingCart />
                </button>
              )}
            </>
          )}
        </div>
      </div>

      <Modal
        title={t("common.warning")}
        open={stockErrorModalVisible}
        onOk={() => setStockErrorModalVisible(false)}
        onCancel={() => setStockErrorModalVisible(false)}
        okText={t("common.ok")}
        footer={[
          <button
            key="ok"
            onClick={() => setStockErrorModalVisible(false)}
            className={styles.modalButton}
          >
            {t("common.ok")}
          </button>,
        ]}
      >
        <p>
          {t("common.not_enough_stock", {
            available: product.stock,
            requested: localQuantity + 1,
          })}
        </p>
      </Modal>
    </>
  );
};

export default ProductCard;