import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ChevronsExpandUpRight, Xmark } from '@gravity-ui/icons';
import { Icon, Modal } from '@gravity-ui/uikit';
import { default as SliderBlock } from "../../blocks/Slider/Slider.js";
import { SliderType } from "../../models/index.js";
import { block } from "../../utils/index.js";
import Image from "../Image/Image.js";
import { getMediaImage } from "../Media/Image/utils.js";
import { i18n } from "./i18n/index.js";
import './FullscreenImage.css';
const b = block('fullscreen-image');
const FULL_SCREEN_ICON_SIZE = 18;
const CLOSE_ICON_SIZE = 24;
const FullscreenImage = (props) => {
    const { imageClassName, sliderData, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps, } = props;
    const [isOpened, setIsOpened] = React.useState(false);
    const [sliderLoaded, setSliderLoaded] = React.useState(false);
    const openModal = () => setIsOpened(true);
    const closeModal = () => setIsOpened(false);
    React.useEffect(() => {
        if (sliderData && !isOpened) {
            setSliderLoaded(false);
        }
    }, [isOpened, sliderData]);
    const handleSliderImageLoad = () => {
        setSliderLoaded(true);
    };
    return (_jsxs("div", { className: b(), ...extraProps, children: [_jsxs("div", { className: b('image-wrapper'), children: [_jsx(Image, { ...props, alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle }), _jsx("button", { className: b('expand-icon-wrapper'), onClick: openModal, children: _jsx(Icon, { data: ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }) })] }), isOpened && (_jsxs(Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }), children: [_jsx("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close'), children: _jsx(Icon, { data: Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) }) }), sliderData ? (_jsx("div", { className: b('modal-slider'), children: _jsx(SliderBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: SliderType.FullscreenCard, children: sliderData.items.map((item, index) => (_jsx("div", { className: b('modal-slider_item'), children: _jsx(Image, { onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper'), ...getMediaImage(item) }) }, index))) }) })) : (_jsx(Image, { ...props, className: b('modal-image', modalImageClass) }))] }))] }));
};
export default FullscreenImage;
//# sourceMappingURL=FullscreenImage.js.map
