import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ChevronsExpandUpRight, Xmark } from '@gravity-ui/icons';
import { Button, Icon, Modal } from '@gravity-ui/uikit';
import { MobileContext } from "../../gravity-blocks/context/mobileContext/index.js";
import { block } from "../../utils/index.js";
import './FullscreenMedia.css';
const b = block('full-screen-media');
const FULL_SCREEN_ICON_SIZE = 18;
const CLOSE_ICON_SIZE = 24;
const getMediaClass = (type) => b('modal-media', { type });
const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
    const [isOpened, setIsOpened] = React.useState(false);
    const isMobile = React.useContext(MobileContext);
    const openModal = (e) => {
        e.stopPropagation();
        setIsOpened(true);
    };
    const closeModal = () => setIsOpened(false);
    if (isMobile) {
        return children();
    }
    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('media-wrapper'), onClickCapture: openModal, children: [children({ className: b('inline-media') }), showFullscreenIcon && (_jsx(Button, { className: b('icon-wrapper'), extraProps: { onClickCapture: openModal }, size: 'l', 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'), contentClassName: b('modal-content'), children: [_jsx(Button, { className: b('icon-wrapper', { visible: true }), onClick: closeModal, size: 'l', children: _jsx(Icon, { data: Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) }) }), children({
                        imageClassName: getMediaClass('image'),
                        videoClassName: getMediaClass('video'),
                        youtubeClassName: getMediaClass('youtube'),
                        fullscreen: true,
                        previewImg: undefined,
                        autoplay: true,
                    })] }))] }));
};
export default FullscreenMedia;
//# sourceMappingURL=FullscreenMedia.js.map
