"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
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 Image_1 = tslib_1.__importDefault(require("../Image/Image.js"));
const utils_2 = require("../Media/Image/utils.js");
const i18n_1 = require("./i18n/index.js");
const b = (0, utils_1.block)('fullscreen-image');
const FULL_SCREEN_ICON_SIZE = 18;
const CLOSE_ICON_SIZE = 24;
const FullscreenImage = (props) => {
    const { imageClassName, sliderData, modalImageClass, imageStyle, alt = (0, i18n_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: b(), ...extraProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('image-wrapper'), children: [(0, jsx_runtime_1.jsx)(Image_1.default, { ...props, alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle }), (0, jsx_runtime_1.jsx)("button", { className: b('expand-icon-wrapper'), onClick: openModal, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }) })] }), isOpened && ((0, jsx_runtime_1.jsxs)(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }), children: [(0, jsx_runtime_1.jsx)("button", { className: b('close-icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) }) }), sliderData ? ((0, jsx_runtime_1.jsx)("div", { className: b('modal-slider'), children: (0, jsx_runtime_1.jsx)(Slider_1.default, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: models_1.SliderType.FullscreenCard, children: sliderData.items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: b('modal-slider_item'), children: (0, jsx_runtime_1.jsx)(Image_1.default, { onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper'), ...(0, utils_2.getMediaImage)(item) }) }, index))) }) })) : ((0, jsx_runtime_1.jsx)(Image_1.default, { ...props, className: b('modal-image', modalImageClass) }))] }))] }));
};
exports.default = FullscreenImage;
//# sourceMappingURL=FullscreenImage.js.map
