import React, { useEffect, useState } from "react";
import "./Best_seller_heart.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart as regularHeart } from "@fortawesome/free-regular-svg-icons";
import { faHeart as solidHeart } from "@fortawesome/free-solid-svg-icons";
import {
  getAllWishlist,
  postWishlist,
} from "../../../../features/wishlist/wishlistSlice";
import { useDispatch, useSelector } from "react-redux";
import {
  getAllProducts,
  getGroupByProduct,
} from "../../../../features/products/productsSlice";
import Success_Modal from "../../common_modal/success_modal/Success_Modal";
import Login_Modal from "../../common_modal/login_modal/Login_Modal";
import Reset_Password_Modal from "../../common_modal/reset_password_modal/Reset_Password_Modal";
import Set_New_Password_Modal from "../../common_modal/set_new_password_modal/Set_New_Password_Modal";

function Best_seller_heart({ product }) {
  const [liked, setLiked] = useState(false);
  const [sparkle, setSparkle] = useState(false);

  const toggleLike = () => {
    setLiked((prev) => !prev);

    // Trigger sparkle only when becoming "liked"
    if (!liked) {
      setSparkle(true);
      setTimeout(() => setSparkle(false), 800); // Reset after animation
    }
  };

  const dispatch = useDispatch();
  const postWishlistData = async (data) => {
    const res = await dispatch(postWishlist({ product_id: data }));

    if (res.meta?.requestStatus === "fulfilled") {
      await dispatch(getAllWishlist());
      // await dispatch(getAllProducts({}));
      // await dispatch(getGroupByProduct({}));
    } else if (res.meta?.requestStatus === "rejected") {
    }
  };

  const isSignin = useSelector((state) => state.auth.is_signin);
  const [email, setEmail] = useState();
  const [contact, setContact] = useState();
  const [showResetModal, setShowResetModal] = useState(false);
  const [showSetPassModal, setShowSetPassModal] = useState(false);
  const [showSuccessModal, setShowSucsessModal] = useState(false);
  const [showAccountCreted, setShowAccountCreted] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);

  const allWishlist = useSelector((state) => state.wishlist.allWishlist);

  // useEffect(() => {
  //   dispatch(getAllWishlist());
  // }, [dispatch]);

  return (
    <section className="Best_seller_heart">
      {/* {product?.best_seller_status && (
        <div className="text_holder">
          <p>Best Seller</p>
        </div>
      )} */}
      {isSignin && (
        <div
          className="like_btn_holder"
          onClick={() => postWishlistData(product?.id)}
        >
          <FontAwesomeIcon
            className={`heart_icon ${
              allWishlist?.data?.some((item) => item.product_id === product?.id)
                ? "active"
                : ""
            } ${sparkle ? "sparkle" : ""}`}
            icon={
              product?.id &&
              allWishlist?.data?.some((item) => item.product_id === product?.id)
                ? solidHeart
                : regularHeart
            }
          />

          {/* <FontAwesomeIcon
            className={`heart_icon ${liked ? "active" : ""} ${
              sparkle ? "sparkle" : ""
            }`}
            icon={product?.Wishlist?.id ? solidHeart : regularHeart}
          /> */}
        </div>
      )}

      {!isSignin && (
        <div
          className="like_btn_holder"
          onClick={() => {
            setShowLoginModal(true);
          }}
        >
          <FontAwesomeIcon
            className={`heart_icon ${liked ? "active" : ""} ${
              sparkle ? "sparkle" : ""
            }`}
            icon={
              product?.id &&
              allWishlist?.data?.some((item) => item.product_id === product?.id)
                ? solidHeart
                : regularHeart
            }
          />
          {/* <FontAwesomeIcon
            className={`heart_icon ${
              allWishlist?.data?.some((item) => item.product_id === product?.id)
                ? "active"
                : ""
            } ${sparkle ? "sparkle" : ""}`}
            icon={
              product?.id &&
              allWishlist?.some((item) => item.product_id === product?.id)
                ? solidHeart
                : regularHeart
            }
          /> */}
        </div>
      )}

      <Login_Modal
        show={showLoginModal}
        onHide={() => {
          setShowLoginModal(false);
        }}
        setShowResetModal={() => setShowResetModal(true)}
        setShowAccountCreted={() => setShowAccountCreted(true)}
      />

      <Reset_Password_Modal
        email={email}
        setEmail={setEmail}
        contact={contact}
        setContact={setContact}
        show={showResetModal}
        onHide={() => {
          setShowResetModal(false);
        }}
        setShowSetPassModal={() => setShowSetPassModal(true)}
      />

      <Set_New_Password_Modal
        email={email}
        setEmail={setEmail}
        contact={contact}
        setContact={setContact}
        show={showSetPassModal}
        onHide={() => {
          setShowSetPassModal(false);
        }}
        setShowSucsessModal={() => setShowSucsessModal(true)}
      />

      <Success_Modal
        show={showSuccessModal}
        onHide={() => {
          setShowSucsessModal(false);
        }}
        successText="Password Reseted Successfully!"
      />

      <Success_Modal
        show={showAccountCreted}
        onHide={() => {
          setShowAccountCreted(false);
        }}
        successText="Account Created Successful!"
      />
    </section>
  );
}

export default Best_seller_heart;
