import * as React from 'react';
import styles from './Image.module.scss';
import * as imageKit from '@wix/image-kit';
const { STATIC_MEDIA_URL } = imageKit;
const fetchLQIP = ({ fittingType, src, target, options, }) => {
    const placeholder = imageKit.getPlaceholder(fittingType, src, target, {
        ...options,
        autoEncode: true,
    });
    if (placeholder?.uri && !/^[a-z]+:/.test(placeholder.uri)) {
        placeholder.uri = `${STATIC_MEDIA_URL}${placeholder.uri}`;
    }
    return placeholder;
};
const SCHEME_RE = /^[a-z]+:/;
const Image = (props) => {
    const { id, containerId, uri, alt, name = '', role, width, height, displayMode, devicePixelRatio, quality, alignType, bgEffectName = '', focalPoint, upscaleMethod, className = '', crop, imageStyles = {}, targetWidth, targetHeight, targetScale, onLoad = () => { }, onError = () => { }, shouldUseLQIP, containerWidth, containerHeight, getPlaceholder, isInFirstFold, placeholderTransition, socialAttrs, isSEOBot, skipMeasure, hasAnimation, encoding, isFluidLayout, } = props;
    const imageRef = React.useRef(null);
    // fix containerId and id to support hoverBox component
    let hasSsrSrc = '';
    const hasBlurTransition = placeholderTransition === 'blur';
    const ssrImageData = React.useRef(null);
    if (!ssrImageData.current) {
        if (getPlaceholder || shouldUseLQIP || isInFirstFold || isSEOBot) {
            const options = {
                upscaleMethod,
                ...(quality ? quality : {}),
                shouldLoadHQImage: isInFirstFold,
                isSEOBot,
                hasAnimation,
                encoding,
            };
            ssrImageData.current = (getPlaceholder || fetchLQIP)({
                fittingType: displayMode,
                src: {
                    id: uri,
                    width,
                    height,
                    crop,
                    name,
                    focalPoint,
                },
                target: {
                    width: containerWidth,
                    height: containerHeight,
                    alignment: alignType,
                    htmlTag: 'img',
                },
                options,
            });
            hasSsrSrc =
                !ssrImageData.current.transformed || isInFirstFold || isSEOBot
                    ? ''
                    : 'true';
        }
        else {
            // to keep an empty placeholder data
            ssrImageData.current = {
                uri: undefined,
                css: { img: {} },
                attr: { img: {}, container: {} },
                transformed: false,
            };
        }
    }
    const isLQIP = !isSEOBot &&
        (getPlaceholder || shouldUseLQIP) &&
        !isInFirstFold &&
        ssrImageData.current.transformed;
    const imageInfo = React.useMemo(() => JSON.stringify({
        containerId,
        ...(containerId && { containerId }),
        ...(alignType && { alignType }),
        ...(skipMeasure && { skipMeasure: true }),
        displayMode,
        ...(containerWidth && { targetWidth: containerWidth }),
        ...(containerHeight && { targetHeight: containerHeight }),
        ...(targetWidth && { targetWidth }),
        ...(targetHeight && { targetHeight }),
        ...(targetScale && { targetScale }),
        isLQIP,
        isSEOBot,
        lqipTransition: placeholderTransition,
        encoding,
        imageData: {
            width,
            height,
            uri,
            name,
            displayMode,
            hasAnimation,
            ...(quality && { quality }),
            ...(devicePixelRatio && { devicePixelRatio }),
            ...(focalPoint && { focalPoint }),
            ...(crop && { crop }),
            ...(upscaleMethod && { upscaleMethod }),
        },
    }), [
        containerId,
        alignType,
        skipMeasure,
        displayMode,
        containerWidth,
        containerHeight,
        targetWidth,
        targetHeight,
        targetScale,
        isLQIP,
        isSEOBot,
        placeholderTransition,
        encoding,
        width,
        height,
        uri,
        name,
        hasAnimation,
        quality,
        devicePixelRatio,
        focalPoint,
        crop,
        upscaleMethod,
    ]);
    const ssrResult = ssrImageData.current;
    const src = ssrResult?.uri;
    const srcset = ssrResult?.srcset;
    const placeholderStyle = ssrResult.css?.img;
    const classNames = `${styles.image} ${className}`;
    React.useEffect(() => {
        // When image comes from cache onLoad not trigger on native HTML element
        const imgElement = imageRef.current;
        if (onLoad && imgElement?.currentSrc && imgElement?.complete) {
            onLoad({
                target: imgElement,
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const maxWidth = ssrResult && !ssrResult?.transformed
        ? `max(${width}px, 100%)`
        : targetWidth
            ? `${targetWidth}px`
            : null;
    return (React.createElement("wow-image", { id: id, class: classNames, "data-image-info": imageInfo, "data-motion-part": `BG_IMG ${containerId}`, "data-bg-effect-name": bgEffectName, "data-has-ssr-src": hasSsrSrc, "data-animate-blur": !isSEOBot && isLQIP && hasBlurTransition ? '' : undefined, "data-is-responsive": isFluidLayout ? 'true' : undefined, style: maxWidth ? { '--wix-img-max-width': maxWidth } : {} },
        React.createElement("img", { src: src, ref: imageRef, alt: alt || '', role: role, style: { ...placeholderStyle, ...imageStyles }, onLoad: onLoad, onError: onError, width: containerWidth ? containerWidth : undefined, height: containerHeight ? containerHeight : undefined, ...socialAttrs, srcSet: isInFirstFold
                ? srcset?.dpr
                    ?.map((s) => SCHEME_RE.test(s) ? s : `${STATIC_MEDIA_URL}${s}`)
                    .join(', ')
                : undefined, 
            // @ts-expect-error fetchpriority type should work in react > 18.3 https://github.com/facebook/react/pull/25927
            fetchpriority: isInFirstFold ? 'high' : undefined, loading: isInFirstFold === false ? 'lazy' : undefined, 
            // The src attribute triggers a mismatch warning because wow-image updates its src outside of the React lifecycle. This causes React to retain the old value in the virtual DOM, which could potentially lead to a bug where the old value is re-rendered during updates. However, we’re confident that this issue is not reproducing in current (16-18) React versions
            suppressHydrationWarning: true })));
};
export { Image, imageKit };
//# sourceMappingURL=Image.js.map