'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useEffect, useMemo, useState } from 'react';
import { FileMeta } from '../FileDetails/FileMeta/index.js';
import './index.scss';
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, alt, meta, onClick, previewSrc })=>{
    return /*#__PURE__*/ _jsxDEV("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,
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__image`,
                children: /*#__PURE__*/ _jsxDEV("img", {
                    alt: alt,
                    src: previewSrc
                }, void 0, false, {
                    fileName: "src/elements/PreviewSizes/index.tsx",
                    lineNumber: 68,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/PreviewSizes/index.tsx",
                lineNumber: 67,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__sizeMeta`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__sizeName`,
                        children: name
                    }, void 0, false, {
                        fileName: "src/elements/PreviewSizes/index.tsx",
                        lineNumber: 71,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV(FileMeta, {
                        ...meta
                    }, void 0, false, {
                        fileName: "src/elements/PreviewSizes/index.tsx",
                        lineNumber: 72,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/PreviewSizes/index.tsx",
                lineNumber: 70,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/PreviewSizes/index.tsx",
        lineNumber: 51,
        columnNumber: 5
    }, this);
};
export const PreviewSizes = ({ doc, imageCacheTag, uploadConfig })=>{
    const { imageSizes } = uploadConfig;
    const { sizes } = doc;
    const alt = doc?.alt || doc.filename || '';
    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 ? `?${encodeURIComponent(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__*/ _jsxDEV("div", {
        className: baseClass,
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__imageWrap`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__meta`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__sizeName`,
                                children: selectedSize || originalFilename
                            }, void 0, false, {
                                fileName: "src/elements/PreviewSizes/index.tsx",
                                lineNumber: 130,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV(FileMeta, {
                                ...selectedSize ? orderedSizes[selectedSize] : originalImage
                            }, void 0, false, {
                                fileName: "src/elements/PreviewSizes/index.tsx",
                                lineNumber: 131,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/PreviewSizes/index.tsx",
                        lineNumber: 129,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("img", {
                        alt: alt,
                        className: `${baseClass}__preview`,
                        src: mainPreviewSrc
                    }, void 0, false, {
                        fileName: "src/elements/PreviewSizes/index.tsx",
                        lineNumber: 133,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/PreviewSizes/index.tsx",
                lineNumber: 128,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__listWrap`,
                children: /*#__PURE__*/ _jsxDEV("div", {
                    className: `${baseClass}__list`,
                    children: [
                        /*#__PURE__*/ _jsxDEV(PreviewSizeCard, {
                            active: !selectedSize,
                            alt: alt,
                            meta: originalImage,
                            name: originalFilename,
                            onClick: ()=>setSelectedSize(null),
                            previewSrc: generateImageUrl(doc)
                        }, void 0, false, {
                            fileName: "src/elements/PreviewSizes/index.tsx",
                            lineNumber: 137,
                            columnNumber: 11
                        }, this),
                        Object.entries(orderedSizes).map(([key, val])=>{
                            const selected = selectedSize === key;
                            const previewSrc = generateImageUrl(val);
                            if (previewSrc) {
                                return /*#__PURE__*/ _jsxDEV(PreviewSizeCard, {
                                    active: selected,
                                    alt: alt,
                                    meta: val,
                                    name: key,
                                    onClick: ()=>setSelectedSize(key),
                                    previewSrc: previewSrc
                                }, key, false, {
                                    fileName: "src/elements/PreviewSizes/index.tsx",
                                    lineNumber: 152,
                                    columnNumber: 17
                                }, this);
                            }
                            return null;
                        })
                    ]
                }, void 0, true, {
                    fileName: "src/elements/PreviewSizes/index.tsx",
                    lineNumber: 136,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/PreviewSizes/index.tsx",
                lineNumber: 135,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/PreviewSizes/index.tsx",
        lineNumber: 127,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map