import React, { useEffect, useState } from "react";
import "./Heart_icon.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 { useDispatch, useSelector } from "react-redux";
import {
  getAllWishlist,
  postWishlist,
} from "../../../features/wishlist/wishlistSlice";
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";

const Heart_icon = ({ categoryId, setCategoryId, product, showQty }) => {
  const [liked, setLiked] = useState(false);
  const [sparkle, setSparkle] = useState(false);
  const dispatch = useDispatch();
  const toggleLike = () => {
    setLiked((prev) => !prev);

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

  const allWishlist = useSelector((state) => state.wishlist.allWishlist);
  const user = useSelector((state) => state.myaccount.addMyaccount);

  useEffect(() => {
    if (user?.id) {
      dispatch(getAllWishlist());
    }
  }, []);

  const postWishlistData = async (id) => {
    const res = await dispatch(postWishlist(id));

    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 [showLogoutModal, setshowLogoutModal] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [showResetModal, setShowResetModal] = useState(false);
  const [showSetPassModal, setShowSetPassModal] = useState(false);
  const [email, setEmail] = useState();
  const [contact, setContact] = useState();
  const [isLogedIn, setIsLogedIn] = useState(false);
  const [showAccountCreted, setShowAccountCreted] = useState(false);
  const [showSuccessModal, setShowSucsessModal] = useState(false);

  return (
    <>
      {isSignIn && (
        <div
          className="favourite_div"
          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
            }
          />
        </div>
      )}
      {!isSignIn && (
        <div
          className="favourite_div"
          onClick={() => {
            setShowLoginModal(true);
          }}
        >
          <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
            }
          />
        </div>
      )}

      <Login_Modal
        show={showLoginModal}
        onHide={() => {
          setShowLoginModal(false);
        }}
        loginDone={() => {
          setIsLogedIn(true);
        }}
        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)}
      />
    </>
  );
};

export default Heart_icon;
