import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useUniqId } from '@gravity-ui/uikit';
import { FullscreenImage, YFMWrapper } from "../../../components/index.js";
import { getMediaImage } from "../../../components/Media/Image/utils.js";
import Media from "../../../components/Media/Media.js";
import { getHeight } from "../../../components/VideoBlock/VideoBlock.js";
import { ProjectSettingsContext } from "../../../gravity-blocks/context/projectSettingsContext/index.js";
import { useTheme } from "../../../gravity-blocks/context/theme/index.js";
import { Col, GridColumnOrderClasses, Row } from "../../../gravity-blocks/grid/index.js";
import { block, getThemedValue } from "../../../utils/index.js";
import { mergeVideoMicrodata } from "../../../utils/microdata.js";
import TabsTextContent from "../TabsTextContent/TabsTextContent.js";
import './TabContent.css';
const b = block('tab-content');
export const TabContent = ({ tabData, isActive, isReverse, contentSize, centered, play, getTabElementId, getTabContentElementId, }) => {
    const { tabName } = tabData;
    const mediaContainerRef = React.useRef(null);
    const theme = useTheme();
    const { renderInvisibleBlocks } = React.useContext(ProjectSettingsContext);
    const captionId = useUniqId();
    const mediaWidth = mediaContainerRef?.current?.offsetWidth;
    const [minImageHeight, setMinImageHeight] = React.useState(mediaContainerRef?.current?.offsetHeight);
    const shouldRender = renderInvisibleBlocks || isActive;
    const themedImage = getThemedValue(tabData.image, theme);
    const themedMedia = getThemedValue(tabData.media, theme);
    const hasNoImage = !themedMedia?.image && !tabData.image;
    const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);
    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
    const imageProps = React.useMemo(() => {
        const imagePropsResult = themedImage && 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 && (_jsx(TabsTextContent, { showMedia: showMedia, data: tabData, imageProps: imageProps || undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
    const mediaContent = showMedia && (_jsxs(Col, { sizes: { all: 12, md: 8 }, orders: {
            all: GridColumnOrderClasses.Last,
            md: GridColumnOrderClasses.First,
        }, className: b('col', { centered: centered }), children: [tabData.media && (_jsx("div", { style: { minHeight: mediaVideoHeight || minImageHeight }, children: _jsx("div", { ref: mediaContainerRef, children: _createElement(Media, { ...mergeVideoMicrodata(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 && (_jsx(React.Fragment, { children: _jsx(FullscreenImage, { ...imageProps, imageClassName: b('image', { border }) }) })), tabData.caption && (_jsx("div", { className: b('caption'), id: captionId, children: _jsx(YFMWrapper, { content: tabData.caption, modifiers: { constructor: true }, id: captionId }) }))] }));
    return (_jsxs(Row, { className: b('row', { reverse: isReverse, hidden: !isActive }), id: getTabContentElementId?.(tabName), role: "tabpanel", ariaProps: {
            'aria-labelledby': getTabElementId?.(tabName),
        }, children: [mediaContent, textContent] }, tabName));
};
//# sourceMappingURL=TabContent.js.map
