"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EMPTY_IMG = void 0;
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("../../gravity-blocks/context/projectSettingsContext/index.js");
const hooks_1 = require("../../gravity-blocks/hooks/index.js");
const models_1 = require("../../models/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';
};
exports.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 ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", media: mediaString, "data-qa": `${qa}-compressed` })), (0, jsx_runtime_1.jsx)("source", { srcSet: src, media: mediaString, "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, onIntrinsicSizeChange, containerClassName, qa, fetchPriority, loading, hide, } = props;
    const { imageRef, onLoad: onLoadOverride } = (0, hooks_1.useImageSize)({ onIntrinsicSizeChange, onLoad });
    const [imgLoadingError, setImgLoadingError] = React.useState(false);
    const src = imageSrc || desktop;
    const hideDevices = typeof hide === 'boolean' || !hide
        ? Object.values(models_1.Device).reduce((acc, device) => ({ ...acc, [device]: Boolean(hide) }), {})
        : hide;
    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source', 'desktop-source-compressed');
    const disableWebp = !src ||
        projectSettings.disableCompress ||
        disableCompress ||
        !(0, imageCompress_1.isCompressible)(src) ||
        imgLoadingError;
    if (!src) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile || exports.EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet || exports.EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: constants_1.BREAKPOINTS.md, minBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: exports.EMPTY_IMG, disableWebp: true, minBreakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.desktopSource })), 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: onLoadOverride, ref: imageRef })] }));
};
exports.default = Image;
//# sourceMappingURL=Image.js.map
