import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { checkWishlist, deleteWishlist, getWishlists, toggleWishlist } from "../../redux/actions/activityAction";

const WishlistComponent = ({ activityId, userId }) => {
  const { wishlists, loading } = useSelector(state => state.wishlists);
  const [isActive, setisActive] = useState(false);
  const [wishlistId, setwishlistId] = useState();
  const dispatch = useDispatch();
  //   console.log("wishlists", wishlists);
  useEffect(() => {
    wishlists &&
      wishlists.length > 0 &&
      wishlists.map(item => {
        if (item.attributes.experience.data.id == activityId) {
          setisActive(true);
          setwishlistId(item.id);
        }
      });
  }, [wishlists]);

  return (
    <div>
      {activityId && userId && (
        <div className="wishlist">
          <span
            onClick={async e => {
              e.preventDefault();
              if (isActive) {
                setisActive(false);
                const response = await deleteWishlist({ wishlistId });
                dispatch(getWishlists({ endUser: userId }));
                // console.log("delete", response);
              } else {
                setisActive(true);
                const response = await toggleWishlist({ activityId, userId });
                dispatch(getWishlists({ endUser: userId }));
              }
              // console.log("response wishlist ", response);
            }}
            className="image-container"
          >
            <Image layout="fill" alt="" className="image img-fluid" src={isActive ? "/images/icons/wishlist-01-active.svg" : "/images/icons/wishlist-01.svg"} />
          </span>
        </div>
      )}
    </div>
  );
};

export default WishlistComponent;