import React, { useEffect, useMemo, useState } from 'react';
import FileMeta from '../FileDetails/FileMeta/index.js';
const baseClass = 'preview-sizes';
const sortSizes = (sizes, imageSizes)=>{
    if (!imageSizes || imageSizes.length === 0) return sizes;
    const orderedSizes = {};
    imageSizes.forEach(({ name })=>{
        if (sizes[name]) {
            orderedSizes[name] = sizes[name];
        }
    });
    return orderedSizes;
};
const PreviewSizeCard = ({ name, active, meta, onClick, previewSrc })=>{
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            `${baseClass}__sizeOption`,
            active && `${baseClass}--selected`
        ].filter(Boolean).join(' '),
        onClick: typeof onClick === 'function' ? onClick : undefined,
        onKeyDown: (e)=>{
            if (typeof onClick !== 'function') return;
            if (e.key === 'Enter') onClick();
        },
        role: "button",
        tabIndex: 0
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__image`
    }, /*#__PURE__*/ React.createElement("img", {
        alt: meta.filename,
        src: previewSrc
    })), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__sizeMeta`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__sizeName`
    }, name), /*#__PURE__*/ React.createElement(FileMeta, meta)));
};
const PreviewSizes = ({ doc, imageCacheTag, uploadConfig })=>{
    const { imageSizes } = uploadConfig;
    const { sizes } = doc;
    const [orderedSizes, setOrderedSizes] = useState(()=>sortSizes(sizes, imageSizes));
    const [selectedSize, setSelectedSize] = useState(null);
    const generateImageUrl = (doc)=>{
        if (!doc.filename) return null;
        if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`;
    };
    useEffect(()=>{
        setOrderedSizes(sortSizes(sizes, imageSizes));
    }, [
        sizes,
        imageSizes,
        imageCacheTag
    ]);
    const mainPreviewSrc = selectedSize ? generateImageUrl(doc.sizes[selectedSize]) : generateImageUrl(doc);
    const originalImage = useMemo(()=>({
            filename: doc.filename,
            filesize: doc.filesize,
            height: doc.height,
            mimeType: doc.mimeType,
            url: doc.url,
            width: doc.width
        }), [
        doc
    ]);
    const originalFilename = 'Original';
    return /*#__PURE__*/ React.createElement("div", {
        className: baseClass
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__imageWrap`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__meta`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__sizeName`
    }, selectedSize || originalFilename), /*#__PURE__*/ React.createElement(FileMeta, selectedSize ? orderedSizes[selectedSize] : originalImage)), /*#__PURE__*/ React.createElement("img", {
        alt: doc.filename,
        className: `${baseClass}__preview`,
        src: mainPreviewSrc
    })), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__listWrap`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__list`
    }, /*#__PURE__*/ React.createElement(PreviewSizeCard, {
        active: !selectedSize,
        meta: originalImage,
        name: originalFilename,
        onClick: ()=>setSelectedSize(null),
        previewSrc: generateImageUrl(doc)
    }), Object.entries(orderedSizes).map(([key, val])=>{
        const selected = selectedSize === key;
        const previewSrc = generateImageUrl(val);
        if (previewSrc) {
            return /*#__PURE__*/ React.createElement(PreviewSizeCard, {
                active: selected,
                key: key,
                meta: val,
                name: key,
                onClick: ()=>setSelectedSize(key),
                previewSrc: previewSrc
            });
        }
        return null;
    }))));
};
export default PreviewSizes;

//# sourceMappingURL=index.js.map