import React, { useEffect } from "react";
import { FaHeart, FaStar } from "react-icons/fa";
import { Currency } from "../../Layout/app/Const";
import { FaCartPlus } from "react-icons/fa6";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import CustomImage from "../../ui/CustomImage";
import { languageObject } from "../../utils/languageObject";
import { Product } from "../../types/item";
import { useAddFavorite, useDeleteFavorite } from "../../api/Favorite";
import useAuthState from "../../state/AuthState";
import { toast } from "react-toastify";
import { useCartState } from "../../state/CartState";
import { useQueryClient } from "react-query";

const ProductCard = ({ item }: { item: Product }) => {
  const [t] = useTranslation();
  const navigate = useNavigate();
  const { isAuthenticated } = useAuthState();
  
  const handel_click = (id: number) => {
    
    navigate(`/product/${id}`);
  };

  const { mutate: addToFavorite, isSuccess: Add } = useAddFavorite();
  const { mutate: deleteToFavorite, isSuccess: Delete } = useDeleteFavorite();
  const price = Number(item?.price);
  const discountAmount = 10;
  const oldPrice = (Number(price) / 0.9).toFixed(2);

  const min = 4.5;
  const max = 5;
  const randomRate = (Math.random() * (max - min) + min)?.toFixed(1);

  const { Cart, setCart } = useCartState();

  const queryClient = useQueryClient();

  const handelChangeFavorite = (item: Product) => {
    // if (!isAuthenticated) {
    //   toast.error("sorry you need to be authenticated");
    //   return;
    // }

    if (item?.favorite) {
      
      deleteToFavorite({
        id: item?.id,
      });
    } else {
      addToFavorite({
        id: item?.id,
      });
    }
    queryClient.invalidateQueries('mainProduct');

  };

  useEffect(() => {
    if (Add) {
      toast.success("added  success");
      queryClient.invalidateQueries("mainProduct");
    }
  }, [Add]);
  useEffect(() => {
    if (Delete) {
      toast.success("removed success");
      queryClient.invalidateQueries("mainProduct");
    }
  }, [Delete]);

  const handelAddToCart = (item: Product) => {
    // if (!isAuthenticated) {

    //   toast.error("sorry you need to be authenticated");
    //   return;
    // }
    setCart(item);


    toast.success(`${languageObject(item?.name)}` + " added to cart");
  };

    
  return (
    <div className="ProductCard">
      <CustomImage src={item?.main_photo} onClick={() => handel_click(item?.base_product_id)} />
      <h4>{languageObject(item?.name)}</h4>
      <p>
        {" "}
        {Currency} {oldPrice}{" "}
      </p>
      <div>
        <p>
          {" "}
          {Currency} {price}
        </p>
        <p>
          {" "}
          {randomRate} <FaStar />
        </p>
      </div>
      <span>{discountAmount}%</span>

      <article>
        <button className="button" onClick={() => handelAddToCart(item)}>
          <FaCartPlus />
          {t("add to cart")}
        </button>
        <FaHeart
          onClick={() => handelChangeFavorite(item)}
          className={item?.favorite ? "" : "not_favorite"}
        />
      </article>
    </div>
  );
};

export default ProductCard;