import dynamic from "next/dynamic";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { Button } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
import WishlistComponent from "./WIshlistComponent.js";
import { useSelector } from "react-redux";
const SimilarExperiences = ({ allActivitiesData }) => {
  const router = useRouter();
  const [listingData, setListingData] = useState([]);
  const { endUser } = useSelector(state => state.endUser);

  let ListingData = [];
  useEffect(() => {
    console.log("allActivitiesData", allActivitiesData);
    ListingData =
      allActivitiesData &&
      allActivitiesData.data.map(item => {
        return {
          id: item.id,
          image: cleanImage(item.attributes.image.data?.attributes),
          topRated: "Top Rated",
          title: item.attributes.name,
          discription: `${item.attributes.description.slice(0, 80)}...`,
          price: item.attributes.pricePerPerson,
          offPrice: `${item.attributes.offers}%`,
          days: "For 1 Night",
          taxes: "Includes taxes & Fees"
        };
      });
    setListingData(ListingData);
  }, [allActivitiesData]);

  const projects = {
    responsive: {
      0: {
        items: 1
      },
      450: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 4
      }
    }
  };
  return (
    <>
      <section className="similar-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">Similar Experiences</div>
                    <h2>Experiences</h2>
                  </div>
                </motion.div>
                <div className="view-all-btn">
                  <Button variant="primary">View All</Button>
                </div>
              </div>
            </div>
          </div>
          {allActivitiesData && (
            <div className="row">
              <div className="col-12">
                <div className="browse-experiences-carousal position-relative">
                  <Swiper
                    slidesPerView={1}
                    navigation={{ nextEl: ".similar-experiences-arrow-left", prevEl: ".similar-experiences-arrow-right" }}
                    breakpoints={{
                      640: {
                        slidesPerView: 1,
                        spaceBetween: 20
                      },
                      768: {
                        slidesPerView: 2,
                        spaceBetween: 40
                      },
                      1024: {
                        slidesPerView: 4,
                        spaceBetween: 20
                      }
                    }}
                    modules={[Navigation, Autoplay]}
                    className="mySwiper01 mySwiper02"
                  >
                    {listingData &&
                      listingData.map(data => {
                        return (
                          <SwiperSlide>
                            <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                              <div className="browse-experiences-item">
                                <div className="img-wrapper">
                                  <span className="image-container">
                                    <Image layout="fill" alt="" className="image img-fluid" src={data.image} priority />
                                  </span>
                                  {/* <div className="top-rated">{data.topRated}</div> */}
                                </div>
                                <div className="info">
                                  <div className="top-name">
                                    <div className="title">{data.title}</div>
                                    <div className="rating-wishlist">
                                      {/* <div className="rating">
                                      <span className="number">8.8</span>
                                        <span className="image-container">
                                          <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                                        </span>
                                      </div> */}
                                      {endUser && <WishlistComponent userId={endUser.id} activityId={data.id} />}
                                      {/* <div className="wishlist">
                                        <span className="image-container">
                                          <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
                                        </span>
                                      </div> */}
                                    </div>
                                  </div>
                                  <div className="discription">
                                    {data.discription}{" "}
                                    {/* <a
                                      onClick={() => {
                                        router.push(`/activities/${data.id}`);
                                      }}
                                    >
                                      Read More
                                    </a> */}
                                  </div>
                                  <div className="price">
                                    ${data.price}
                                    {/* <span className="off">{data.offPrice} OFF</span> */}
                                  </div>
                                  <div className="detail">
                                    <div className="">{data.days}</div>
                                    <div className="">{data.taxes}</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="similar-experiences-arrow-right arrow">
                        <span className="image-container">
                          <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                        </span>
                      </button>
                      <button className="similar-experiences-arrow-left arrow">
                        <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>
      </section>
    </>
  );
};

export default SimilarExperiences;