"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.fileShape = exports.default = void 0;
var _base = _interopRequireDefault(require("@emotion/styled/base"));
var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _immutable = require("immutable");
var _reactPolyglot = require("react-polyglot");
var _decapCmsUiDefault = require("decap-cms-ui-default");
var _UI = require("../UI");
var _MediaLibraryTop = _interopRequireDefault(require("./MediaLibraryTop"));
var _MediaLibraryCardGrid = _interopRequireDefault(require("./MediaLibraryCardGrid"));
var _EmptyMessage = _interopRequireDefault(require("./EmptyMessage"));
var _react2 = require("@emotion/react");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
 * Responsive styling needs to be overhauled. Current setup requires specifying
 * widths per breakpoint.
 */const cardWidth = `280px`;
const cardHeight = `240px`;
const cardMargin = `10px`;

/**
 * cardWidth + cardMargin * 2 = cardOutsideWidth
 * (not using calc because this will be nested in other calcs)
 */
const cardOutsideWidth = `300px`;
const StyledModal = /*#__PURE__*/(0, _base.default)(_UI.Modal, {
  target: "e4d0svf0",
  label: "StyledModal"
})("display:grid;grid-template-rows:120px auto;width:calc(", cardOutsideWidth, " + 20px);background-color:", props => props.isPrivate && _decapCmsUiDefault.colors.grayDark, ";@media (min-width: 800px){width:calc(", cardOutsideWidth, " * 2 + 20px);}@media (min-width: 1120px){width:calc(", cardOutsideWidth, " * 3 + 20px);}@media (min-width: 1440px){width:calc(", cardOutsideWidth, " * 4 + 20px);}@media (min-width: 1760px){width:calc(", cardOutsideWidth, " * 5 + 20px);}@media (min-width: 2080px){width:calc(", cardOutsideWidth, " * 6 + 20px);}h1{color:", props => props.isPrivate && _decapCmsUiDefault.colors.textFieldBorder, ";}button:disabled,label[disabled]{background-color:", props => props.isPrivate && `rgba(217, 217, 217, 0.15)`, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 8836 characters] */"));
function MediaLibraryModal({
  isVisible,
  canInsert,
  files,
  dynamicSearch,
  dynamicSearchActive,
  forImage,
  isLoading,
  isPersisting,
  isDeleting,
  hasNextPage,
  isPaginating,
  privateUpload,
  query,
  selectedFile,
  handleFilter,
  handleQuery,
  toTableData,
  handleClose,
  handleSearchChange,
  handleSearchKeyDown,
  handlePersist,
  handleDelete,
  handleInsert,
  handleDownload,
  setScrollContainerRef,
  handleAssetClick,
  handleLoadMore,
  loadDisplayURL,
  displayURLs,
  t
}) {
  const filteredFiles = forImage ? handleFilter(files) : files;
  const queriedFiles = !dynamicSearch && query ? handleQuery(query, filteredFiles) : filteredFiles;
  const tableData = toTableData(queriedFiles);
  const hasFiles = files && !!files.length;
  const hasFilteredFiles = filteredFiles && !!filteredFiles.length;
  const hasSearchResults = queriedFiles && !!queriedFiles.length;
  const hasMedia = hasSearchResults;
  const shouldShowEmptyMessage = !hasMedia;
  const emptyMessage = isLoading && !hasMedia && t('mediaLibrary.mediaLibraryModal.loading') || dynamicSearchActive && t('mediaLibrary.mediaLibraryModal.noResults') || !hasFiles && t('mediaLibrary.mediaLibraryModal.noAssetsFound') || !hasFilteredFiles && t('mediaLibrary.mediaLibraryModal.noImagesFound') || !hasSearchResults && t('mediaLibrary.mediaLibraryModal.noResults');
  const hasSelection = hasMedia && !(0, _isEmpty2.default)(selectedFile);
  return (0, _react2.jsx)(StyledModal, {
    isOpen: isVisible,
    onClose: handleClose,
    isPrivate: privateUpload
  }, (0, _react2.jsx)(_MediaLibraryTop.default, {
    t: t,
    onClose: handleClose,
    privateUpload: privateUpload,
    forImage: forImage,
    onDownload: handleDownload,
    onUpload: handlePersist,
    query: query,
    onSearchChange: handleSearchChange,
    onSearchKeyDown: handleSearchKeyDown,
    searchDisabled: !dynamicSearchActive && !hasFilteredFiles,
    onDelete: handleDelete,
    canInsert: canInsert,
    onInsert: handleInsert,
    hasSelection: hasSelection,
    isPersisting: isPersisting,
    isDeleting: isDeleting,
    selectedFile: selectedFile
  }), !shouldShowEmptyMessage ? null : (0, _react2.jsx)(_EmptyMessage.default, {
    content: emptyMessage,
    isPrivate: privateUpload
  }), (0, _react2.jsx)(_MediaLibraryCardGrid.default, {
    setScrollContainerRef: setScrollContainerRef,
    mediaItems: tableData,
    isSelectedFile: file => selectedFile.key === file.key,
    onAssetClick: handleAssetClick,
    canLoadMore: hasNextPage,
    onLoadMore: handleLoadMore,
    isPaginating: isPaginating,
    paginatingMessage: t('mediaLibrary.mediaLibraryModal.loading'),
    cardDraftText: t('mediaLibrary.mediaLibraryCard.draft'),
    cardWidth: cardWidth,
    cardHeight: cardHeight,
    cardMargin: cardMargin,
    isPrivate: privateUpload,
    loadDisplayURL: loadDisplayURL,
    displayURLs: displayURLs
  }));
}
const fileShape = exports.fileShape = {
  displayURL: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
  id: _propTypes.default.string.isRequired,
  key: _propTypes.default.string.isRequired,
  name: _propTypes.default.string.isRequired,
  queryOrder: _propTypes.default.number,
  size: _propTypes.default.number,
  path: _propTypes.default.string.isRequired
};
MediaLibraryModal.propTypes = {
  isVisible: _propTypes.default.bool,
  canInsert: _propTypes.default.bool,
  files: _propTypes.default.arrayOf(_propTypes.default.shape(fileShape)).isRequired,
  dynamicSearch: _propTypes.default.bool,
  dynamicSearchActive: _propTypes.default.bool,
  forImage: _propTypes.default.bool,
  isLoading: _propTypes.default.bool,
  isPersisting: _propTypes.default.bool,
  isDeleting: _propTypes.default.bool,
  hasNextPage: _propTypes.default.bool,
  isPaginating: _propTypes.default.bool,
  privateUpload: _propTypes.default.bool,
  query: _propTypes.default.string,
  selectedFile: _propTypes.default.oneOfType([_propTypes.default.shape(fileShape), _propTypes.default.shape({})]),
  handleFilter: _propTypes.default.func.isRequired,
  handleQuery: _propTypes.default.func.isRequired,
  toTableData: _propTypes.default.func.isRequired,
  handleClose: _propTypes.default.func.isRequired,
  handleSearchChange: _propTypes.default.func.isRequired,
  handleSearchKeyDown: _propTypes.default.func.isRequired,
  handlePersist: _propTypes.default.func.isRequired,
  handleDelete: _propTypes.default.func.isRequired,
  handleInsert: _propTypes.default.func.isRequired,
  setScrollContainerRef: _propTypes.default.func.isRequired,
  handleAssetClick: _propTypes.default.func.isRequired,
  handleLoadMore: _propTypes.default.func.isRequired,
  loadDisplayURL: _propTypes.default.func.isRequired,
  t: _propTypes.default.func.isRequired,
  displayURLs: _propTypes.default.instanceOf(_immutable.Map).isRequired
};
var _default = exports.default = (0, _reactPolyglot.translate)()(MediaLibraryModal);