import { a as __awaiter } from './tslib.es6-es.js';
import React__default, { useState } from 'react';
import classnames from 'classnames';
import { L as LightBox } from './LightBox-es.js';
import { F as FormatFile } from './FormatFile-es.js';
import 'filesize';
import { B as Button } from './Button-es.js';
import { i as isPreviewableImage } from './Thumbnail-es.js';

var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","showMoreButtonOverride":"CP3mpiod-4Q-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};

function Gallery({ files, size = "base", max, onDelete }) {
    const [images, setImages] = useState([]);
    const [filesToImageIndex, setFilesToImageIndex] = useState([]);
    React__default.useEffect(() => {
        generateImagesArray(files).then(result => {
            setImages(result.images);
            setFilesToImageIndex(result.filesToImageIndex);
        });
    }, [files]);
    const [lightboxOpen, setLightboxOpen] = useState(false);
    const [lightboxIndex, setLightboxIndex] = useState(0);
    const [displayPastMax, setDisplayPastMax] = useState(max ? false : true);
    const visibleFiles = displayPastMax ? files : files.slice(0, max);
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
            visibleFiles.map((file, index) => {
                return (React__default.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.thumbnailSrc || getFileSrc(file)) }), display: "compact", displaySize: size, onClick: () => {
                        handleThumbnailClicked(index);
                    }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
            }),
            max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
                React__default.createElement(Button, { type: "tertiary", size: size, UNSAFE_className: { container: styles.showMoreButtonOverride }, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                        setDisplayPastMax(true);
                    } })))),
        React__default.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
    function handleThumbnailClicked(index) {
        return __awaiter(this, void 0, void 0, function* () {
            if (isPreviewableImage(files[index].type)) {
                handleLightboxOpen(index);
            }
            else {
                window.open(yield getFileSrc(files[index]), "_blank");
            }
        });
    }
    function handleLightboxOpen(index) {
        const fileToImageIndex = filesToImageIndex[index];
        if (fileToImageIndex !== undefined) {
            setLightboxIndex(fileToImageIndex);
            setLightboxOpen(true);
        }
    }
    function handleLightboxClose() {
        setLightboxOpen(false);
    }
}
function getFileSrc(file) {
    return __awaiter(this, void 0, void 0, function* () {
        return typeof file.src === "string" ? file.src : file.src();
    });
}
function generateImagesArray(files) {
    return __awaiter(this, void 0, void 0, function* () {
        const images = [];
        const filesToImageIndex = [];
        let imageIndex = 0;
        for (let i = 0; i < files.length; i++) {
            if (isPreviewableImage(files[i].type)) {
                images.push({ title: files[i].name, url: yield getFileSrc(files[i]) });
                filesToImageIndex.push(imageIndex);
                imageIndex++;
            }
            else {
                filesToImageIndex.push(undefined);
            }
        }
        return { images, filesToImageIndex };
    });
}

export { Gallery as G };
