import React, { useEffect, useState } from "react";
import ImageGallery from "react-image-gallery";
import Image from "next/image";
import { cleanImage } from "../../services/imageHandling";

const DetailGallery = ({ activityById }) => {
  console.log("activityById here", activityById);

  // const images = [
  //   {
  //     original: "/images/product-gallery/01.png",
  //     thumbnail: "/images/product-gallery/01.png"
  //   },
  //   {
  //     original: "/images/product-gallery/01.png",
  //     thumbnail: "/images/product-gallery/01.png"
  //   },
  //   {
  //     original: "/images/product-gallery/01.png",
  //     thumbnail: "/images/product-gallery/01.png"
  //   },
  //   {
  //     original: "/images/product-gallery/01.png",
  //     thumbnail: "/images/product-gallery/01.png"
  //   },
  //   {
  //     original: "/images/product-gallery/01.png",
  //     thumbnail: "/images/product-gallery/01.png"
  //   },
  //   {
  //     original: "/images/product-gallery/01.png",
  //     thumbnail: "/images/product-gallery/01.png"
  //   }
  // ];
  // let images = [];
  const [images, setimages] = useState([]);
  useEffect(() => {
    setimages(
      activityById &&
        activityById.data.attributes.imagesComponent.map(item => {
          return {
            original: cleanImage(item.image.data.attributes),
            thumbnail: cleanImage(item.image.data.attributes)
          };
        })
    );
  }, [activityById]);

  return (
    <>
      <div className="product-info hide-on-desktop">
        <div className="">
          <div className="top-row">
            <div className="most-booked">Most Booked</div>
            <div className="wishlist-share">
              <a href="#" className="add-to-wishlist">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist-01.svg" />
                </span>
              </a>
              <a href="#" className="add-to-forwardt">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
                </span>
              </a>
            </div>
          </div>
          <div className="product-name">Edge City Climb</div>
        </div>
      </div>
      {activityById && (
        <div className="product-gallery">
          <div className="row">
            <div className="col-12">
              <div className="product-gallery-item">
                <ImageGallery showNav={false} showPlayButton={false} items={images} />
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default DetailGallery;