import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { animated, config, useSpring } from '@react-spring/web';
import debounce from "lodash/debounce.js";
import { default as SliderBlock } from "../../../blocks/Slider/Slider.js";
import { SliderType } from "../../../models/index.js";
import { block, getQaAttrubutes } from "../../../utils/index.js";
import BackgroundImage from "../../BackgroundImage/BackgroundImage.js";
import FullscreenImage from "../../FullscreenImage/FullscreenImage.js";
import ImageView from "../../Image/Image.js";
import { getMediaImage } from "./utils.js";
import './Image.css';
const b = block('media-component-image');
export const 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 = getQaAttrubutes(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
    const [scrollY, setScrollY] = React.useState(0);
    const [{ springScrollY }, springSetScrollY] = useSpring(() => ({
        springScrollY: 0,
        config: config.molasses,
    }));
    let parallaxInterpolate = '';
    React.useEffect(() => {
        if (parallax) {
            const handleScroll = () => setScrollY(window.scrollY);
            const debouncedHandler = debounce(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 = getMediaImage(item);
        return (_jsx(FullscreenImage, { ...itemData, imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData, onLoad: onLoad, onIntrinsicSizeChange: onIntrinsicSizeChange }, itemData.alt));
    };
    const imageBackground = (oneImage) => {
        const imageData = getMediaImage(oneImage);
        return (_jsx(animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate, children: _jsx(BackgroundImage, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }) }));
    };
    const imageOnly = (oneImage) => {
        const imageData = getMediaImage(oneImage);
        return (_jsx(ImageView, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad, onIntrinsicSizeChange: onIntrinsicSizeChange }));
    };
    const imageSlider = (imageArray) => {
        const fullscreenItem = fullscreen === undefined || fullscreen;
        return (_jsx(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard, children: imageArray.map((item, index) => (_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);
};
export default Image;
//# sourceMappingURL=Image.js.map
