"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const constants_1 = require("../../constants.js");
const projectSettingsContext_1 = require("../../context/projectSettingsContext/index.js");
const utils_1 = require("../../utils/index.js");
const imageCompress_1 = require("../../utils/imageCompress.js");
const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase.js"));
const checkWebP = (src) => {
    return src.endsWith('.webp') ? src : src + '.webp';
};
const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })), (0, jsx_runtime_1.jsx)("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })] }));
const Image = (props) => {
    const projectSettings = React.useContext(projectSettingsContext_1.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 = (0, utils_1.getQaAttrubutes)(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
    const disableWebp = projectSettings.disableCompress ||
        disableCompress ||
        !(0, imageCompress_1.isCompressible)(src) ||
        imgLoadingError;
    return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [mobile && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), tablet && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.tabletSource })), src && !disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), (0, jsx_runtime_1.jsx)(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
};
exports.default = Image;
//# sourceMappingURL=Image.js.map
