"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabContent = void 0;
const tslib_1 = require("tslib");
const react_1 = require("react");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const uikit_1 = require("@gravity-ui/uikit");
const components_1 = require("../../../components/index.js");
const utils_1 = require("../../../components/Media/Image/utils.js");
const Media_1 = tslib_1.__importDefault(require("../../../components/Media/Media.js"));
const VideoBlock_1 = require("../../../components/VideoBlock/VideoBlock.js");
const projectSettingsContext_1 = require("../../../gravity-blocks/context/projectSettingsContext/index.js");
const theme_1 = require("../../../gravity-blocks/context/theme/index.js");
const grid_1 = require("../../../gravity-blocks/grid/index.js");
const utils_2 = require("../../../utils/index.js");
const microdata_1 = require("../../../utils/microdata.js");
const TabsTextContent_1 = tslib_1.__importDefault(require("../TabsTextContent/TabsTextContent.js"));
const b = (0, utils_2.block)('tab-content');
const TabContent = ({ tabData, isActive, isReverse, contentSize, centered, play, getTabElementId, getTabContentElementId, }) => {
    const { tabName } = tabData;
    const mediaContainerRef = React.useRef(null);
    const theme = (0, theme_1.useTheme)();
    const { renderInvisibleBlocks } = React.useContext(projectSettingsContext_1.ProjectSettingsContext);
    const captionId = (0, uikit_1.useUniqId)();
    const mediaWidth = mediaContainerRef?.current?.offsetWidth;
    const [minImageHeight, setMinImageHeight] = React.useState(mediaContainerRef?.current?.offsetHeight);
    const shouldRender = renderInvisibleBlocks || isActive;
    const themedImage = (0, utils_2.getThemedValue)(tabData.image, theme);
    const themedMedia = (0, utils_2.getThemedValue)(tabData.media, theme);
    const hasNoImage = !themedMedia?.image && !tabData.image;
    const mediaVideoHeight = hasNoImage && mediaWidth && (0, VideoBlock_1.getHeight)(mediaWidth);
    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
    const imageProps = React.useMemo(() => {
        const imagePropsResult = themedImage && (0, utils_1.getMediaImage)(themedImage);
        if (tabData.caption && imagePropsResult) {
            Object.assign(imagePropsResult, {
                'aria-describedby': captionId,
            });
        }
        return imagePropsResult;
    }, [captionId, tabData.caption, themedImage]);
    const handleImageHeight = React.useCallback(() => {
        if (minImageHeight !== mediaContainerRef?.current?.offsetHeight) {
            setMinImageHeight(mediaContainerRef?.current?.offsetHeight);
        }
    }, [minImageHeight]);
    React.useEffect(() => {
        handleImageHeight();
    }, [isActive, handleImageHeight]);
    if (!shouldRender) {
        return null;
    }
    const showMedia = isActive && Boolean(tabData.media || imageProps);
    const showText = Boolean(tabData.text);
    const border = tabData.border || 'shadow';
    const textContent = showText && ((0, jsx_runtime_1.jsx)(TabsTextContent_1.default, { showMedia: showMedia, data: tabData, imageProps: imageProps || undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
    const mediaContent = showMedia && ((0, jsx_runtime_1.jsxs)(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
            all: grid_1.GridColumnOrderClasses.Last,
            md: grid_1.GridColumnOrderClasses.First,
        }, className: b('col', { centered: centered }), children: [tabData.media && ((0, jsx_runtime_1.jsx)("div", { style: { minHeight: mediaVideoHeight || minImageHeight }, children: (0, jsx_runtime_1.jsx)("div", { ref: mediaContainerRef, children: (0, react_1.createElement)(Media_1.default, { ...(0, microdata_1.mergeVideoMicrodata)((0, utils_2.getThemedValue)(tabData.media, theme), {
                            name: tabData.tabName,
                            description: tabData.caption ? tabData.caption : undefined,
                        }), key: tabName, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }) }) })), imageProps && ((0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.FullscreenImage, { ...imageProps, imageClassName: b('image', { border }) }) })), tabData.caption && ((0, jsx_runtime_1.jsx)("div", { className: b('caption'), id: captionId, children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: tabData.caption, modifiers: { constructor: true }, id: captionId }) }))] }));
    return ((0, jsx_runtime_1.jsxs)(grid_1.Row, { className: b('row', { reverse: isReverse, hidden: !isActive }), id: getTabContentElementId?.(tabName), role: "tabpanel", ariaProps: {
            'aria-labelledby': getTabElementId?.(tabName),
        }, children: [mediaContent, textContent] }, tabName));
};
exports.TabContent = TabContent;
//# sourceMappingURL=TabContent.js.map
