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;