'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import './index.scss';
const baseClass = 'thumbnail';
import { File } from '../../graphics/File/index.js';
import { ShimmerEffect } from '../ShimmerEffect/index.js';
export const Thumbnail = (props)=>{
    const { className = '', doc: { filename } = {}, fileSrc, height, imageCacheTag, size, width } = props;
    const [fileExists, setFileExists] = React.useState(undefined);
    const classNames = [
        baseClass,
        `${baseClass}--size-${size || 'medium'}`,
        className
    ].join(' ');
    React.useEffect(()=>{
        if (!fileSrc) {
            setFileExists(false);
            return;
        }
        setFileExists(undefined);
        const img = new Image();
        img.src = fileSrc;
        img.onload = ()=>{
            setFileExists(true);
        };
        img.onerror = ()=>{
            setFileExists(false);
        };
    }, [
        fileSrc
    ]);
    let src = null;
    /**
   * If an imageCacheTag is provided, append it to the fileSrc
   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand
   */ if (fileSrc) {
        const queryChar = fileSrc?.includes('?') ? '&' : '?';
        src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc;
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: classNames,
        children: [
            fileExists === undefined && /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
                height: "100%"
            }, void 0, false, {
                fileName: "src/elements/Thumbnail/index.tsx",
                lineNumber: 69,
                columnNumber: 36
            }, this),
            fileExists && /*#__PURE__*/ _jsxDEV("img", {
                alt: filename,
                height: height,
                src: src,
                width: width
            }, void 0, false, {
                fileName: "src/elements/Thumbnail/index.tsx",
                lineNumber: 70,
                columnNumber: 22
            }, this),
            fileExists === false && /*#__PURE__*/ _jsxDEV(File, {}, void 0, false, {
                fileName: "src/elements/Thumbnail/index.tsx",
                lineNumber: 71,
                columnNumber: 32
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/Thumbnail/index.tsx",
        lineNumber: 68,
        columnNumber: 5
    }, this);
};
export function ThumbnailComponent(props) {
    const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props;
    const [fileExists, setFileExists] = React.useState(undefined);
    const classNames = [
        baseClass,
        `${baseClass}--size-${size || 'medium'}`,
        className
    ].join(' ');
    React.useEffect(()=>{
        if (!fileSrc) {
            setFileExists(false);
            return;
        }
        setFileExists(undefined);
        const img = new Image();
        img.src = fileSrc;
        img.onload = ()=>{
            setFileExists(true);
        };
        img.onerror = ()=>{
            setFileExists(false);
        };
    }, [
        fileSrc
    ]);
    let src = '';
    /**
   * If an imageCacheTag is provided, append it to the fileSrc
   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand
   */ if (fileSrc) {
        const queryChar = fileSrc?.includes('?') ? '&' : '?';
        src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc;
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: classNames,
        children: [
            fileExists === undefined && /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
                height: "100%"
            }, void 0, false, {
                fileName: "src/elements/Thumbnail/index.tsx",
                lineNumber: 120,
                columnNumber: 36
            }, this),
            fileExists && /*#__PURE__*/ _jsxDEV("img", {
                alt: alt || filename,
                src: src
            }, void 0, false, {
                fileName: "src/elements/Thumbnail/index.tsx",
                lineNumber: 121,
                columnNumber: 22
            }, this),
            fileExists === false && /*#__PURE__*/ _jsxDEV(File, {}, void 0, false, {
                fileName: "src/elements/Thumbnail/index.tsx",
                lineNumber: 122,
                columnNumber: 32
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/Thumbnail/index.tsx",
        lineNumber: 119,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map