import React, { useEffect, useState } from "react";
import ImageGallery from "react-image-gallery";
import Image from "next/image";
import { cleanImage } from "../../services/imageHandling";
import { useSelector } from "react-redux";
import WishlistComponent from "./WIshlistComponent";
import { Modal } from "react-bootstrap";
import ShareWidget from "./ShareWidget";

const DetailGallery = ({ activityById }) => {
  const { endUser } = useSelector(state => state.endUser);
  const [showshareWidget, setshowshareWidget] = useState(false);
  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">
              {endUser && <WishlistComponent activityId={activityById.data.id} userId={endUser.id} />}
              <a href="#" className="add-to-forwardt">
                <span className="image-container">
                  <Image
                    onClick={() => {
                      setshowshareWidget(true);
                    }}
                    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>
      )}
      <Modal
        show={showshareWidget}
        onHide={() => {
          setshowshareWidget(false);
        }}
      >
        <Modal.Header closeButton>Share on social media</Modal.Header>
        <Modal.Body>
          <ShareWidget />
        </Modal.Body>
      </Modal>
    </>
  );
};

export default DetailGallery;