import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { BREAKPOINTS } from "../../constants.js";
import { ProjectSettingsContext } from "../../gravity-blocks/context/projectSettingsContext/index.js";
import { useImageSize } from "../../gravity-blocks/hooks/index.js";
import { Device } from "../../models/index.js";
import { getQaAttrubutes } from "../../utils/index.js";
import { isCompressible } from "../../utils/imageCompress.js";
import ImageBase from "../ImageBase/ImageBase.js";
const checkWebP = (src) => {
    return src.endsWith('.webp') ? src : src + '.webp';
};
export const EMPTY_IMG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';
const DeviceSpecificFragment = ({ disableWebp, src, maxBreakpoint, minBreakpoint, qa, }) => {
    const media = [];
    if (maxBreakpoint) {
        media.push(`(max-width: ${maxBreakpoint}px)`);
    }
    if (minBreakpoint) {
        media.push(`(min-width: ${minBreakpoint}px)`);
    }
    const mediaString = media.join(' and ');
    return (_jsxs(React.Fragment, { children: [!disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", media: mediaString, "data-qa": `${qa}-compressed` })), _jsx("source", { srcSet: src, media: mediaString, "data-qa": qa })] }));
};
const Image = (props) => {
    const projectSettings = React.useContext(ProjectSettingsContext);
    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, onIntrinsicSizeChange, containerClassName, qa, fetchPriority, loading, hide, } = props;
    const { imageRef, onLoad: onLoadOverride } = useImageSize({ onIntrinsicSizeChange, onLoad });
    const [imgLoadingError, setImgLoadingError] = React.useState(false);
    const src = imageSrc || desktop;
    const hideDevices = typeof hide === 'boolean' || !hide
        ? Object.values(Device).reduce((acc, device) => ({ ...acc, [device]: Boolean(hide) }), {})
        : hide;
    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source', 'desktop-source-compressed');
    const disableWebp = !src ||
        projectSettings.disableCompress ||
        disableCompress ||
        !isCompressible(src) ||
        imgLoadingError;
    if (!src) {
        return null;
    }
    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp: true, minBreakpoint: BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), _jsx(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoadOverride, ref: imageRef })] }));
};
export default Image;
//# sourceMappingURL=Image.js.map
