import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { BREAKPOINTS } from "../../constants.js";
import { ProjectSettingsContext } from "../../context/projectSettingsContext/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';
};
const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (_jsxs(React.Fragment, { children: [!disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })), _jsx("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })] }));
const Image = (props) => {
    const projectSettings = React.useContext(ProjectSettingsContext);
    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
    const [imgLoadingError, setImgLoadingError] = React.useState(false);
    const src = imageSrc || desktop;
    if (!src) {
        return null;
    }
    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
    const disableWebp = projectSettings.disableCompress ||
        disableCompress ||
        !isCompressible(src) ||
        imgLoadingError;
    return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [mobile && (_jsx(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), tablet && (_jsx(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })), 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: onLoad })] }));
};
export default Image;
//# sourceMappingURL=Image.js.map
