"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderBlock = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const uikit_1 = require("@gravity-ui/uikit");
const components_1 = require("../../components/index.js");
const HeaderBreadcrumbs_1 = tslib_1.__importDefault(require("../../components/HeaderBreadcrumbs/HeaderBreadcrumbs.js"));
const utils_1 = require("../../components/Media/Image/utils.js");
const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper.js"));
const constants_1 = require("../../constants.js");
const theme_1 = require("../../gravity-blocks/context/theme/index.js");
const windowWidthContext_1 = require("../../gravity-blocks/context/windowWidthContext/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 utils_3 = require("./utils.js");
const b = (0, utils_2.block)('header-block');
const Background = ({ background, isMobile }) => {
    const { url, image, fullWidthMedia, video, color } = background;
    const imageObject = url ? (0, utils_1.getMediaImage)(url) : image;
    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
    return ((0, jsx_runtime_1.jsx)("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color }, children: renderMedia && ((0, jsx_runtime_1.jsx)(components_1.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 }) => ((0, jsx_runtime_1.jsx)("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background?.color } }));
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 = (0, windowWidthContext_1.useWindowWidth)();
    const isMobile = windowWidth <= constants_1.BREAKPOINTS.sm;
    const theme = (0, theme_1.useTheme)();
    const hasRightSideImage = Boolean((image || video || videoIframe) && !centered);
    const curImageSize = imageSize || (0, utils_3.getImageSize)(width);
    const titleSizes = hasRightSideImage ? (0, utils_3.titleWithImageSizes)(curImageSize) : (0, utils_3.getTitleSizes)(width);
    let curVerticalOffset = verticalOffset;
    if (hasRightSideImage && !verticalOffset) {
        curVerticalOffset = 'm';
    }
    const backgroundThemed = background && (0, utils_2.getThemedValue)(background, theme);
    const imageThemed = image && (0, utils_2.getThemedValue)(image, theme);
    const videoThemed = video && (0, utils_2.getThemedValue)(video, theme);
    const { src: videoIframeSrc, ...videoIframeProps } = videoIframe ?? {};
    const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)({ video: videoThemed, image: imageThemed, videoIframe: videoIframeSrc, ...videoIframeProps }, { name: title, description });
    const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;
    const titleId = (0, uikit_1.useUniqId)();
    return ((0, jsx_runtime_1.jsxs)("header", { className: b({
            ['has-media']: hasRightSideImage,
            ['full-width']: fullWidth,
            ['media-view']: mediaView,
            ['controls-view']: textTheme,
        }, className), children: [backgroundThemed && fullWidth && (0, jsx_runtime_1.jsx)(FullWidthBackground, { background: backgroundThemed }), backgroundThemed && (0, jsx_runtime_1.jsx)(Background, { background: backgroundThemed, isMobile: isMobile }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { containerClass: b('container-fluid'), className: b(null, gridClassName), children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('breadcrumbs'), children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(HeaderBreadcrumbs_1.default, { ...breadcrumbs, theme: textTheme }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsxs)(grid_1.Col, { reset: true, className: b('content-wrapper', contentWrapperClassName), children: [(0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('content', {
                                            offset,
                                            theme: textTheme,
                                            'vertical-offset': curVerticalOffset,
                                        }), children: (0, jsx_runtime_1.jsxs)(grid_1.Col, { sizes: titleSizes, className: b('content-inner', { centered }, contentInnerClassName), children: [overtitle && ((0, jsx_runtime_1.jsx)("div", { className: b('overtitle'), children: typeof overtitle === 'string' ? ((0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { tagName: "div", className: b('overtitle'), content: overtitle, modifiers: {
                                                            constructor: true,
                                                            constructorTheme: textTheme,
                                                        } })) : (overtitle) })), (0, jsx_runtime_1.jsxs)(YFMWrapper_1.default, { 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 && ((0, jsx_runtime_1.jsx)("div", { className: b('description', { theme: textTheme }), children: (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { content: description, modifiers: {
                                                            constructor: true,
                                                            constructorTheme: textTheme,
                                                        } }) })), additionalInfo && ((0, jsx_runtime_1.jsx)("div", { className: b('additional-info', { theme: textTheme }), children: (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { content: additionalInfo, modifiers: {
                                                            constructor: true,
                                                            constructorTheme: textTheme,
                                                        } }) })), buttons && ((0, jsx_runtime_1.jsx)("div", { className: b('buttons'), "data-qa": "header-buttons", children: buttons.map((button, index) => ((0, jsx_runtime_1.jsx)(components_1.RouterLink, { href: button.url, children: (0, jsx_runtime_1.jsx)(components_1.Button, { className: b('button'), size: "xl", extraProps: {
                                                                'aria-describedby': titleId,
                                                                ...button.extraProps,
                                                            }, ...button }, index) }, index))) })), children] }) }) }), hasRightSideImage && ((0, jsx_runtime_1.jsx)(components_1.Media, { className: b('media', { [curImageSize]: true }, mediaClassName), videoClassName: b('video'), imageClassName: b('image'), youtubeClassName: b('video-iframe'), ...mediaWithMicrodata }))] }) })] })] }));
};
exports.HeaderBlock = HeaderBlock;
exports.default = exports.HeaderBlock;
//# sourceMappingURL=Header.js.map
