import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from "react";
import cx from "classnames";
import Badge from "../../../../ui/Badge";
import CssFlex from "../../../../ui/CssFlex";
import Pagination from "../../../../ui/next/DataTable/Pagination";
import Skeleton from "../../../../ui/Skeleton";
import LoadingClever from "../../../../ui/LoadingClever";
import Typography from "../../../../ui/Typography";
import Bolt from "../../../../ui/Icon/Bolt";
import getClasses from "./styles";

var SelectableGallery = function SelectableGallery(props) {
  var translations = props.translations,
      images = props.images,
      selectedAssets = props.selectedAssets,
      setSelectedAssets = props.setSelectedAssets,
      minWidth = props.minWidth,
      modal = props.modal;
  var imagesPerRow = props.imagesPerRow,
      maxImages = props.maxImages,
      landscape = props.landscape,
      maxToSelect = props.maxToSelect,
      onRemoveAsset = props.onRemoveAsset,
      isLoadingAssets = props.isLoadingAssets;

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

  var classes = getClasses({
    landscape: landscape,
    modal: modal,
    minWidth: minWidth
  });

  var manageSelectedIndexes = function manageSelectedIndexes(assetId) {
    if (modal) {
      if (selectedAssets.includes(assetId)) {
        setSelectedAssets(selectedAssets.filter(function (asset) {
          return asset !== assetId;
        }));
      } else if (maxToSelect === 1) {
        setSelectedAssets([assetId]);
      } else if (selectedAssets.length < maxToSelect) {
        setSelectedAssets([].concat(_toConsumableArray(selectedAssets), [assetId]));
      }
    }
  };

  var managePage = function managePage(newPage) {
    setPage(newPage);
  };

  useEffect(function () {
    setPage(0);
  }, [images]);
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    width: "100%",
    alignItems: "center"
  }, isLoadingAssets && /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center",
    width: "100%",
    className: classes.relative
  }, /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center",
    alignItems: "center",
    gap: "md",
    className: classes.syncContainer
  }, /*#__PURE__*/React.createElement(LoadingClever, {
    size: 24,
    className: classes.loadingIcon
  }), /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 700,
    weight: "semibold",
    className: classes.aiGenerating
  }, translations.aiGenerating)))), /*#__PURE__*/React.createElement(CssFlex, _extends({
    gap: modal ? "sm" : "xl",
    wrap: "wrap",
    width: modal ? ["100%", "100%", "".concat(imagesPerRow * parseInt(minWidth.split("px")[0], 10) + imagesPerRow * 8, "px")] : "100%"
  }, modal && {
    maxWidth: "".concat(imagesPerRow * parseInt(minWidth.split("px")[0], 10) + imagesPerRow * 8, "px")
  }), isLoadingAssets && page === 0 && [1, 2, 3, 4, 5].map(function (_, index) {
    return /*#__PURE__*/React.createElement(Skeleton, {
      key: "gallery-skeleton-".concat(index),
      className: classes.loadingContainer
    });
  }), images === null || images === void 0 ? void 0 : images.slice(page * maxImages, page * maxImages + maxImages).map(function (image) {
    return /*#__PURE__*/React.createElement("button", {
      key: "image-".concat(image.id),
      type: "button",
      onClick: function onClick() {
        return manageSelectedIndexes(image.id);
      },
      "data-selected": selectedAssets.includes(image.id),
      className: cx(classes.imageContainer, _defineProperty({}, classes.containerHover, !modal))
    }, /*#__PURE__*/React.createElement("img", {
      src: image.url,
      alt: "logo",
      className: classes.image
    }), modal && selectedAssets.includes(image.id) && /*#__PURE__*/React.createElement(Badge, {
      badgeContent: selectedAssets.indexOf(image.id) + 1,
      color: "primary",
      className: classes.imageSelectedBadge
    }), !modal && /*#__PURE__*/React.createElement("div", {
      className: classes.headerButtons
    }, /*#__PURE__*/React.createElement(CssFlex, {
      onClick: function onClick() {
        return onRemoveAsset(image.id);
      },
      justifyContent: "space-between",
      alignItems: "flex-start",
      className: classes.removeButton
    }, translations.discardButton), image.source === "ai" && /*#__PURE__*/React.createElement(CssFlex, {
      justifyContent: "center",
      alignItems: "center",
      className: classes.AIButton
    }, /*#__PURE__*/React.createElement(Bolt, {
      size: 24,
      color: "blue"
    }), translations.iaIcon)));
  })), (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
  }));
};

export default SelectableGallery;