"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultAnimatedDivQa = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const web_1 = require("@react-spring/web");
const debounce_1 = tslib_1.__importDefault(require("lodash/debounce.js"));
const Slider_1 = tslib_1.__importDefault(require("../../../blocks/Slider/Slider.js"));
const models_1 = require("../../../models/index.js");
const utils_1 = require("../../../utils/index.js");
const BackgroundImage_1 = tslib_1.__importDefault(require("../../BackgroundImage/BackgroundImage.js"));
const FullscreenImage_1 = tslib_1.__importDefault(require("../../FullscreenImage/FullscreenImage.js"));
const Image_1 = tslib_1.__importDefault(require("../../Image/Image.js"));
const utils_2 = require("./utils.js");
const b = (0, utils_1.block)('media-component-image');
exports.defaultAnimatedDivQa = 'animated-div';
const Image = (props) => {
    const { parallax, height, imageClassName, fullscreenClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, onIntrinsicSizeChange, } = props;
    const image = Array.isArray(props.image) && disableImageSliderForArrayInput
        ? props.image[0]
        : props.image;
    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
    const [scrollY, setScrollY] = React.useState(0);
    const [{ springScrollY }, springSetScrollY] = (0, web_1.useSpring)(() => ({
        springScrollY: 0,
        config: web_1.config.molasses,
    }));
    let parallaxInterpolate = '';
    React.useEffect(() => {
        if (parallax) {
            const handleScroll = () => setScrollY(window.scrollY);
            const debouncedHandler = (0, debounce_1.default)(handleScroll, 5);
            window.addEventListener('scroll', debouncedHandler, { passive: true });
            return () => window.removeEventListener('scroll', debouncedHandler);
        }
        return () => { };
    });
    if (parallax) {
        const parallaxLevel = 2;
        springSetScrollY.start({ springScrollY: height && scrollY > height ? height : scrollY });
        parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
    }
    const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
    const renderFullscreenImage = (item, sliderData) => {
        const itemData = (0, utils_2.getMediaImage)(item);
        return ((0, jsx_runtime_1.jsx)(FullscreenImage_1.default, { ...itemData, imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData, onLoad: onLoad, onIntrinsicSizeChange: onIntrinsicSizeChange }, itemData.alt));
    };
    const imageBackground = (oneImage) => {
        const imageData = (0, utils_2.getMediaImage)(oneImage);
        return ((0, jsx_runtime_1.jsx)(web_1.animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate, children: (0, jsx_runtime_1.jsx)(BackgroundImage_1.default, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }) }));
    };
    const imageOnly = (oneImage) => {
        const imageData = (0, utils_2.getMediaImage)(oneImage);
        return ((0, jsx_runtime_1.jsx)(Image_1.default, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad, onIntrinsicSizeChange: onIntrinsicSizeChange }));
    };
    const imageSlider = (imageArray) => {
        const fullscreenItem = fullscreen === undefined || fullscreen;
        return ((0, jsx_runtime_1.jsx)(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard, children: imageArray.map((item, index) => ((0, jsx_runtime_1.jsx)(React.Fragment, { children: fullscreenItem
                    ? renderFullscreenImage(item, { items: imageArray, initialIndex: index })
                    : imageOnly(item) }, index))) }));
    };
    if (Array.isArray(image)) {
        return imageSlider(image);
    }
    if (fullscreen) {
        return renderFullscreenImage(image);
    }
    return isBackground ? imageBackground(image) : imageOnly(image);
};
exports.default = Image;
//# sourceMappingURL=Image.js.map
