import { Empty } from "antd";
import Image from "next/image";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { Button } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead";
import { useDispatch, useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
import Pagination from "react-js-pagination";
import { getActivitiesByFilters } from "../../redux/actions/activityAction";

const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => {
  // const [gridClass, setGridClass] = useState('col-md-3');
  const { endUser } = useSelector(state => state.endUser);
  const router = useRouter();
  const dispatch = useDispatch();
  // useEffect(() => {
  //   dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
  // }, [router]);
  console.log("endUser", endUser);
  // console.log("router", router);
  let { page = 1, location = "" } = router.query;
  page = Number(page);

  let queryParams;

  if (typeof window !== "undefined") {
    queryParams = new URLSearchParams(window.location.search);
  }
  const handlePagination = pageNumber => {
    // This was the old way to do this, by doing this we were getting rid of the other query string parameters.
    // router.push(`?page=${pageNumber}`);

    // We have done this to take care of keeping the search filters in the query params
    // when we end up changing the page number.
    if (queryParams.has("page")) {
      queryParams.set("page", pageNumber);
    } else {
      queryParams.append("page", pageNumber);
    }
    router.replace({
      search: queryParams.toString()
    });
  };
  console.log("page", page);

  return (
    <>
      {allActivitiesData && !allActivitiesData.data.length == 0 ? (
        <div className="listing-items">
          {!loading ? (
            <div className="row">
              {allActivitiesData &&
                allActivitiesData.data.map(data => {
                  return (
                    <div className={gridClass}>
                      <div className="item">
                        <div className="browse-experiences-item">
                          <div 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>
                          </div>
                          <div className="info">
                            <div className="top-name">
                              <div className="title">{data?.attributes?.name}</div>
                              <div className="rating-wishlist">
                                <div className="rating">
                                  <span className="number">{data?.attributes?.rating}</span>
                                  <span className="image-container">
                                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                                  </span>
                                </div>
                                {endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
                              </div>
                            </div>
                            <div className="discription">
                              {data.discription} <a href="">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>
                      </div>
                    </div>
                  );
                })}
            </div>
          ) : (
            <Loader />
          )}
        </div>
      ) : (
        <Empty />
      )}
      <div className="row">
        <div className="col-12">
          <div className="load-more">
            <Pagination
              activePage={page}
              itemsCountPerPage={12}
              totalItemsCount={totalCount}
              onChange={async (e) => {
                console.log("log >",e);
                await handlePagination(e);
                dispatch(getActivitiesByFilters({ currentPage: e }));

              }}
              nextPageText={"›"}
              prevPageText={"‹"}
              firstPageText={"«"}
              lastPageText={"»"}
              itemClass="page-item"
              linkClass="page-link"
            ></Pagination>
          </div>
        </div>
      </div>
    </>
  );
};

export default ListingItems;