import React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import { Image, ImageSizesStyles } from '../../../Image';
import { ImageActionsOverlay } from '../../../ImageActionsOverlay';
import { useStyles } from './styles';
export var GalleryView = function (_a) {
    var items = _a.items, selectedItems = _a.selectedItems, onSelectImage = _a.onSelectImage, onDeselectImage = _a.onDeselectImage, onShareLink = _a.onShareLink, onSetAsDefault = _a.onSetAsDefault, onDownload = _a.onDownload, onClickImage = _a.onClickImage, onDelete = _a.onDelete;
    var styles = useStyles();
    var renderImageActionsOverlay = function (id) {
        return (React.createElement(ImageActionsOverlay, { id: id, selected: selectedItems.includes(id), selectionMode: selectedItems.length !== 0, onSelect: function () { return onSelectImage(id); }, onDeselect: function () { return onDeselectImage(id); }, onShareLink: function () { return onShareLink(id); }, onSetAsDefault: function () { return onSetAsDefault(id); }, onDownload: function () { return onDownload(id); }, onClick: function () { return onClickImage(id); }, onDelete: onDelete ? function () { return onDelete(id); } : undefined, canBeSelected: true }));
    };
    return (React.createElement(Box, { className: styles.root },
        React.createElement(Grid, { container: true }, items.map(function (_a) {
            var id = _a.id, src = _a.src;
            return (React.createElement(Grid, { key: id, classes: { item: styles.item }, item: true },
                React.createElement(Image, { size: ImageSizesStyles.LARGE, onClick: function () { return onClickImage(id); }, src: src, overlay: renderImageActionsOverlay(id) })));
        }))));
};
