import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable complexity */
import { useUniqId } from '@gravity-ui/uikit';
import * as React from 'react';
import { Button, HTML, 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 { MobileContext } from "../../context/mobileContext/index.js";
import { useTheme } from "../../context/theme/index.js";
import { Col, Grid, Row } from "../../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, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, } = props;
    const isMobile = React.useContext(MobileContext);
    const theme = useTheme();
    const hasRightSideImage = Boolean((image || video) && !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 mediaWithMicrodata = mergeVideoMicrodata({ video: videoThemed, image: imageThemed }, {
        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'), 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'), 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 }), children: [overtitle && (_jsx("div", { className: b('overtitle'), children: typeof overtitle === 'string' ? (_jsx(HTML, { children: overtitle })) : (overtitle) })), _jsxs("h1", { className: b('title'), id: titleId, children: [status, renderTitle ? renderTitle(title) : _jsx(HTML, { children: title })] }), 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 }), videoClassName: b('video'), imageClassName: b('image'), ...mediaWithMicrodata }))] }) })] })] }));
};
export default HeaderBlock;
//# sourceMappingURL=Header.js.map
