import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";

const MyWhishList = ({ data }) => {
  const router = useRouter();
  const { endUser } = useSelector(state => state.endUser);
  console.log("checking end user", endUser);
  return (
    <Fragment>
      <div className="container pb-5">
        <div className="row">
          <div className="col-12 col-lg-12 form-container content-wraaper">
            <h2 className="px-2 px-lg-0">My Bookings</h2>
            {endUser === null || endUser === undefined || endUser === "" ? (
              <h1>You need to login first!</h1>
            ) : (
              <div className="listing-items">
                <div className="row">
                  {data?.length > 0 ? (
                    <>
                      {data.map((data, index) => (
                        <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
                          <div className="item">
                            <div className="browse-experiences-item">
                              <div className="img-wrapper">
                                <span className="image-container">
                                  <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
                                </span>
                                {/* <div className="top-rated">Top Rated</div> */}
                              </div>
                              <div className="info">
                                <div className="top-name">
                                  <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
                                  <div className="rating-wishlist">
                                    {/* <div className="rating">
                                      <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
                                      <span className="image-container">
                                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                                      </span>
                                    </div> */}
                                    <WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
                                  </div>
                                </div>
                                <div className="discription">
                                  <p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p>
                                </div>
                                <div className="price">
                                  ${data?.attributes?.experience?.data?.attributes?.pricePerPerson} 
                                  {/* <span className="off">{}% OFF</span> */}
                                </div>
                                <div className="detail">
                                  {/* <div className="">For 1 Night</div> */}
                                  <div className="">Includes taxes & Fees</div>
                                </div>
                                <div className="explore-now">
                                  <Button
                                    variant="primary"
                                    onClick={() => {
                                      router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
                                    }}
                                  >
                                    Explore Now
                                  </Button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </>
                  ) : (
                    <>
                      <p>No Item Found</p>
                    </>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default MyWhishList;