import ReactPaginate from "react-paginate";
import { useRouter } from "next/router";
import Image from "next/legacy/image";
import { Link } from "react-router-dom";

const GalleryList = ({gallery, basepath}) => {
    const router = useRouter()

    const handlePagination = page => {
        const path = router.pathname
        const query = router.query
        query.page = page.selected + 1
        router.push({
          pathname: path,
          query: query,
        })
    }

    return (
        <div>
        {gallery.data.map((gall) => {
            var image = gall.attributes.gallery_images.data[0].attributes.Image
            var imageUrl = basepath + image.data.attributes.formats.small.url
            return (
                <a href={"/gallery/" + gall.attributes.Slug}>
                    <div>{gall.attributes.Title}
                    <Image 
                    src={imageUrl}
                    layout="responsive"
                    height={image.data.attributes.formats.small.height}
                    width={image.data.attributes.formats.small.width}
                    key={image.data.attributes.id}
                    className="card-img-top"
                    alt={gall.attributes.Title}></Image>
                </div>
                </a>
            )
        })}
        <ReactPaginate
                marginPagesDisplayed={2}
                pageRangeDisplayed={5}
                previousLabel={"previous"}
                nextLabel={"next"}
                breakLabel={"..."}
                initialPage={gallery.meta.pagination.page}
                pageCount={gallery.meta.pagination.pageCount}
                onPageChange={handlePagination} />
        </div>
    )
}

export default GalleryList