'use strict';

var tslib_es6 = require('./tslib.es6-cjs.js');
var React = require('react');
var classnames = require('classnames');
var LightBox = require('./LightBox-cjs.js');
var FormatFile = require('./FormatFile-cjs.js');
require('filesize');
var Button = require('./Button-cjs.js');
var Thumbnail = require('./Thumbnail-cjs.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] = React.useState([]);
    const [filesToImageIndex, setFilesToImageIndex] = React.useState([]);
    React.useEffect(() => {
        generateImagesArray(files).then(result => {
            setImages(result.images);
            setFilesToImageIndex(result.filesToImageIndex);
        });
    }, [files]);
    const [lightboxOpen, setLightboxOpen] = React.useState(false);
    const [lightboxIndex, setLightboxIndex] = React.useState(0);
    const [displayPastMax, setDisplayPastMax] = React.useState(max ? false : true);
    const visibleFiles = displayPastMax ? files : files.slice(0, max);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
            visibleFiles.map((file, index) => {
                return (React.createElement(FormatFile.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.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
                React.createElement(Button.Button, { type: "tertiary", size: size, UNSAFE_className: { container: styles.showMoreButtonOverride }, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
                        setDisplayPastMax(true);
                    } })))),
        React.createElement(LightBox.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
    function handleThumbnailClicked(index) {
        return tslib_es6.__awaiter(this, void 0, void 0, function* () {
            if (Thumbnail.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 tslib_es6.__awaiter(this, void 0, void 0, function* () {
        return typeof file.src === "string" ? file.src : file.src();
    });
}
function generateImagesArray(files) {
    return tslib_es6.__awaiter(this, void 0, void 0, function* () {
        const images = [];
        const filesToImageIndex = [];
        let imageIndex = 0;
        for (let i = 0; i < files.length; i++) {
            if (Thumbnail.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 };
    });
}

exports.Gallery = Gallery;
