import dynamic from "next/dynamic";
import Image from "next/image";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import React from "react";
import { Button } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
import WishlistComponent from "../detail/WIshlistComponent.js";
import { useSelector } from "react-redux";
const BrowseExperiences = ({ allActivitiesData }) => {
  const { endUser } = useSelector(state => state.endUser);

  const router = useRouter();

  return (
    <>
      <section className="browse-experiences-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="head-btn">
                <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                  <div className="head01">
                    <div className="title">Browse Experiences</div>
                    <h2>In New York</h2>
                  </div>
                </motion.div>
                <div className="view-all-btn">
                  <Button
                    variant="primary"
                    onClick={() => {
                      router.push("/listing");
                    }}
                  >
                    View All
                  </Button>
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <div className="browse-experiences-carousal position-relative">
                <Swiper
                  slidesPerView={1}
                  // autoplay={{
                  //   delay: 2500,
                  //   disableOnInteraction: false
                  // }}
                  autoHeight={true}
                  navigation={{ nextEl: ".BrowseExperiences-left", prevEl: ".BrowseExperiences-right" }}
                  breakpoints={{
                    640: {
                      slidesPerView: 1,
                      spaceBetween: 20
                    },
                    768: {
                      slidesPerView: 2,
                      spaceBetween: 40
                    },
                    1024: {
                      slidesPerView: 4,
                      spaceBetween: 20
                    }
                  }}
                  modules={[Navigation, Autoplay]}
                  className="mySwiper01 mySwiper02"
                >
                  {allActivitiesData &&
                    allActivitiesData.data.map(data => {
                      return (
                        <SwiperSlide key={data?.id}>
                          <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                            <div className="browse-experiences-item">
                              <a href="/detail" className="img-wrapper">
                                <span className="image-container">
                                  <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
                                </span>
                                <div className="top-rated">Top Rated</div>
                              </a>
                              <div className="info">
                                <div className="top-name">
                                  <div className="title">{data?.attributes?.name}</div>
                                  <div className="rating-wishlist">
                                    <div className="rating">
                                      {data?.attributes?.rating}
                                      <span className="image-container">
                                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                                      </span>
                                    </div>
                                    <div className="wishlist">
                                      {endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
                                      {/* <span className="image-container">
                                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
                                    </span> */}
                                    </div>
                                  </div>
                                </div>
                                <div className="discription">
                                  <span>{data?.attributes?.description}</span> <a href="/detail">Read More</a>
                                </div>
                                <div className="price">
                                  ${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.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
                                    onClick={() => {
                                      router.push(`/activities/${data.id}`);
                                    }}
                                    variant="primary"
                                  >
                                    Explore Now
                                  </Button>
                                </div>
                              </div>
                            </div>
                          </motion.div>
                        </SwiperSlide>
                      );
                    })}
                </Swiper>
                <div className="swiper-nav">
                  <div className="navbutton d-flex justify-content-between ">
                    <button className="BrowseExperiences-right arrow" id="BrowseExperiences-right" aria-label="BrowseExperiences-right">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                      </span>
                    </button>
                    <button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* <div className="row">
            <div className="col-12">
              <div className="btn-center">
                <Button variant="outline-secondary">Sign In for Member Price</Button>
              </div>
            </div>
          </div> */}
        </div>
      </section>
    </>
  );
};

export default BrowseExperiences;