import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useUniqId } from '@gravity-ui/uikit';
import { Button, Media, RouterLink } from "../../components/index.js";
import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs/HeaderBreadcrumbs.js";
import { getMediaImage } from "../../components/Media/Image/utils.js";
import YFMWrapper from "../../components/YFMWrapper/YFMWrapper.js";
import { BREAKPOINTS } from "../../constants.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { useWindowWidth } from "../../gravity-blocks/context/windowWidthContext/index.js";
import { Col, Grid, Row } from "../../gravity-blocks/grid/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import { mergeVideoMicrodata } from "../../utils/microdata.js";
import { getImageSize, getTitleSizes, titleWithImageSizes } from "./utils.js";
import './Header.css';
const b = block('header-block');
const Background = ({ background, isMobile }) => {
    const { url, image, fullWidthMedia, video, color } = background;
    const imageObject = url ? getMediaImage(url) : image;
    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
    return (_jsx("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color }, children: renderMedia && (_jsx(Media, { ...background, className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject })) }));
};
const FullWidthBackground = ({ background }) => (_jsx("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background?.color } }));
export const HeaderBlock = (props) => {
    const { title, overtitle, description, buttons, image, video, videoIframe, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, contentWrapperClassName, contentInnerClassName, } = props;
    const windowWidth = useWindowWidth();
    const isMobile = windowWidth <= BREAKPOINTS.sm;
    const theme = useTheme();
    const hasRightSideImage = Boolean((image || video || videoIframe) && !centered);
    const curImageSize = imageSize || getImageSize(width);
    const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);
    let curVerticalOffset = verticalOffset;
    if (hasRightSideImage && !verticalOffset) {
        curVerticalOffset = 'm';
    }
    const backgroundThemed = background && getThemedValue(background, theme);
    const imageThemed = image && getThemedValue(image, theme);
    const videoThemed = video && getThemedValue(video, theme);
    const { src: videoIframeSrc, ...videoIframeProps } = videoIframe ?? {};
    const mediaWithMicrodata = mergeVideoMicrodata({ video: videoThemed, image: imageThemed, videoIframe: videoIframeSrc, ...videoIframeProps }, { name: title, description });
    const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;
    const titleId = useUniqId();
    return (_jsxs("header", { className: b({
            ['has-media']: hasRightSideImage,
            ['full-width']: fullWidth,
            ['media-view']: mediaView,
            ['controls-view']: textTheme,
        }, className), children: [backgroundThemed && fullWidth && _jsx(FullWidthBackground, { background: backgroundThemed }), backgroundThemed && _jsx(Background, { background: backgroundThemed, isMobile: isMobile }), _jsxs(Grid, { containerClass: b('container-fluid'), className: b(null, gridClassName), children: [breadcrumbs && (_jsx(Row, { className: b('breadcrumbs'), children: _jsx(Col, { children: _jsx(HeaderBreadcrumbs, { ...breadcrumbs, theme: textTheme }) }) })), _jsx(Row, { children: _jsxs(Col, { reset: true, className: b('content-wrapper', contentWrapperClassName), children: [_jsx(Row, { children: _jsx(Col, { className: b('content', {
                                            offset,
                                            theme: textTheme,
                                            'vertical-offset': curVerticalOffset,
                                        }), children: _jsxs(Col, { sizes: titleSizes, className: b('content-inner', { centered }, contentInnerClassName), children: [overtitle && (_jsx("div", { className: b('overtitle'), children: typeof overtitle === 'string' ? (_jsx(YFMWrapper, { tagName: "div", className: b('overtitle'), content: overtitle, modifiers: {
                                                            constructor: true,
                                                            constructorTheme: textTheme,
                                                        } })) : (overtitle) })), _jsxs(YFMWrapper, { content: title, contentClassName: b('title'), className: b('title-container'), modifiers: { constructor: true, constructorTheme: textTheme }, tagName: "h1", contentPosition: "end", children: [status, renderTitle ? renderTitle(title) : null] }), description && (_jsx("div", { className: b('description', { theme: textTheme }), children: _jsx(YFMWrapper, { content: description, modifiers: {
                                                            constructor: true,
                                                            constructorTheme: textTheme,
                                                        } }) })), additionalInfo && (_jsx("div", { className: b('additional-info', { theme: textTheme }), children: _jsx(YFMWrapper, { content: additionalInfo, modifiers: {
                                                            constructor: true,
                                                            constructorTheme: textTheme,
                                                        } }) })), buttons && (_jsx("div", { className: b('buttons'), "data-qa": "header-buttons", children: buttons.map((button, index) => (_jsx(RouterLink, { href: button.url, children: _jsx(Button, { className: b('button'), size: "xl", extraProps: {
                                                                'aria-describedby': titleId,
                                                                ...button.extraProps,
                                                            }, ...button }, index) }, index))) })), children] }) }) }), hasRightSideImage && (_jsx(Media, { className: b('media', { [curImageSize]: true }, mediaClassName), videoClassName: b('video'), imageClassName: b('image'), youtubeClassName: b('video-iframe'), ...mediaWithMicrodata }))] }) })] })] }));
};
export default HeaderBlock;
//# sourceMappingURL=Header.js.map
