import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from "react";
import CssFlex from "../../../../ui/CssFlex";
import CssGrid from "../../../../ui/CssGrid";
import Pagination from "../../../../ui/next/DataTable/Pagination";
import getClasses from "./styles";
import Skeleton from "../../../../ui/Skeleton";

var Gallery = function Gallery(props) {
  var images = props.images,
      imageIndex = props.imageIndex,
      setImageIndex = props.setImageIndex,
      isLoading = props.isLoading;
  var imagesPerRow = props.imagesPerRow,
      maxImages = props.maxImages,
      landscape = props.landscape;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      page = _useState2[0],
      setPage = _useState2[1];

  var classes = getClasses({
    landscape: landscape
  }); // Control pagination changes:

  var managePage = function managePage(newPage) {
    setPage(newPage);
  }; // Check if it needs to change the page after add or remove a new image:


  useEffect(function () {
    if (imageIndex !== -1 && images !== null && images !== void 0 && images[imageIndex]) {
      var newPage = Math.floor(imageIndex / maxImages);
      setPage(newPage);
    }
  }, [images]); // Check if there is an image selected after remove one on that page:

  useEffect(function () {
    if (imageIndex < (images === null || images === void 0 ? void 0 : images.length) && imageIndex !== -1) {
      var newPage = Math.floor(imageIndex / maxImages);
      setPage(newPage);
    }
  }, [imageIndex]);
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "sm",
    alignItems: "center",
    flexGrow: "1",
    justifyContent: "space-between"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    wrap: "wrap",
    width: "100%"
  }, isLoading && [1, 2, 3, 4, 5].map(function (_, index) {
    return /*#__PURE__*/React.createElement(Skeleton, {
      key: "loading-skeleton-".concat(index),
      className: classes.loadingContainer
    });
  }), !isLoading && (images === null || images === void 0 ? void 0 : images.slice(page * maxImages, page * maxImages + maxImages).map(function (image, index) {
    return /*#__PURE__*/React.createElement("button", {
      key: "image-".concat(image.id),
      type: "button",
      onClick: function onClick() {
        return setImageIndex(page * maxImages + index);
      },
      "data-selected": page * maxImages + index === imageIndex,
      className: classes.imageContainer
    }, /*#__PURE__*/React.createElement("img", {
      src: image.url,
      alt: "logo",
      className: classes.image
    }));
  }))), !isLoading && (images === null || images === void 0 ? void 0 : images.length) > maxImages && /*#__PURE__*/React.createElement(Pagination, {
    onPageChange: function onPageChange(newPage) {
      return managePage(newPage);
    },
    pageSize: maxImages,
    page: page,
    total: images === null || images === void 0 ? void 0 : images.length,
    py: null
  }));
};

export default Gallery;