import React__default, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { G as Glimmer } from './Glimmer-es.js';
import { I as Icon } from './Icon-es.js';
import { T as Typography } from './Typography-es.js';

var styles$1 = {"content":"b9lhF-BkUnI-","hasName":"BJLJeUxloeQ-","large":"t5IzWH6-Sy0-","fileName":"tj--cPRjQfI-","base":"l2Vxo1qaR8U-","spinning":"LDAOyzklETo-"};

var styles = {"image":"qOmZU-rbNf4-","fadeIn":"zB1aNhsmmqY-","hidden":"_2bihNsPs7w4-","spinning":"ZLMkLuZeH-o-"};

function InternalThumbnailImage({ file, UNSAFE_className, UNSAFE_style, }) {
    const { name, src } = file;
    const [imageSource, setImageSource] = useState();
    const [imageLoaded, setImageLoaded] = useState(false);
    useEffect(() => {
        src().then(url => setImageSource(url));
    }, []);
    return (React__default.createElement(React__default.Fragment, null,
        !imageLoaded && React__default.createElement(Glimmer, { size: "auto" }),
        React__default.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container })));
    function handleImageLoad() {
        setImageLoaded(true);
    }
}

// This function comes from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator
function getClientBrowser(userAgent) {
    // The order matters here, and this may report false positives for unlisted browsers.
    if (userAgent.includes("Firefox")) {
        // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
        return "Mozilla Firefox";
    }
    else if (userAgent.includes("SamsungBrowser")) {
        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
        return "Samsung Internet";
    }
    else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
        return "Opera";
    }
    else if (userAgent.includes("Edge")) {
        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
        return "Microsoft Edge (Legacy)";
    }
    else if (userAgent.includes("Edg")) {
        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
        return "Microsoft Edge (Chromium)";
    }
    else if (userAgent.includes("Chrome")) {
        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
        return "Google Chrome or Chromium";
    }
    else if (userAgent.includes("Safari")) {
        // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
        return "Apple Safari";
    }
    else {
        return "unknown";
    }
}
function isSafari(userAgent) {
    return getClientBrowser(userAgent) === "Apple Safari";
}

function isPreviewableImage(type) {
    if (!type || !type.startsWith("image/"))
        return false;
    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
    const isHeic = type.startsWith("image/heic");
    const isSVG = type.startsWith("image/svg");
    const isVendor = /^image\/(vnd[.-]|x-)/i.test(type);
    if (isSVG || isVendor)
        return false;
    if (isHeic && !isSafari(userAgent))
        return false;
    return true;
}

function Thumbnail({ compact = false, size, file, UNSAFE_className, UNSAFE_style, }) {
    const { name, type } = file;
    const iconName = getIconNameFromType(type);
    const hasName = Boolean(name) && compact;
    if (isPreviewableImage(type)) {
        return (React__default.createElement(InternalThumbnailImage, { file: file, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }));
    }
    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
            [styles$1.hasName]: hasName,
        }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
        React__default.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
        hasName && (React__default.createElement("div", { className: styles$1.fileName },
            React__default.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
}
function getIconNameFromType(mimeType) {
    if (mimeType.startsWith("image/"))
        return "image";
    if (mimeType.startsWith("video/"))
        return "video";
    switch (mimeType) {
        case "application/pdf":
            return "pdf";
        case "application/vnd.ms-excel":
            return "excel";
        default:
            return "file";
    }
}

export { Thumbnail as T, isPreviewableImage as i };
