"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const components_1 = require("../../components/index.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 sub_blocks_1 = require("../../sub-blocks/index.js");
const utils_1 = require("../../utils/index.js");
const hooks_1 = require("./hooks.js");
const b = (0, utils_1.block)('hero-block');
const Hero = (props) => {
    const { breadcrumbs, overtitle, buttons, media: themedMedia, fullWidth, verticalOffset = 'm', theme: contentTheme = 'default', background: themedBackground, ...contentProps } = props;
    const [mediaAspectRatio, setMediaAspectRatio] = React.useState(Infinity);
    const { aspectRatio: mediaContainerAspectRatio, ref: mediaContainerRef } = (0, hooks_1.useContainerAspectRatio)();
    const isDesktop = (0, windowWidthContext_1.useWindowWidth)() > constants_1.BREAKPOINTS.md;
    const isMediaVertical = mediaAspectRatio < mediaContainerAspectRatio;
    const contextTheme = (0, theme_1.useTheme)();
    const theme = contentTheme === 'default' ? contextTheme : contentTheme;
    const background = (0, utils_1.getThemedValue)(themedBackground, theme);
    const media = (0, utils_1.getThemedValue)(themedMedia, theme);
    const buttonProps = React.useMemo(() => buttons?.map((buttonThemed) => {
        if (React.isValidElement(buttonThemed)) {
            return buttonThemed;
        }
        const button = (0, utils_1.getThemedValue)(buttonThemed, theme);
        return {
            size: 'xl',
            ...button,
        };
    }), [buttons, theme]);
    const onMediaIntrinsicSizeChange = React.useCallback(({ width, height }) => setMediaAspectRatio(width / height), []);
    return ((0, jsx_runtime_1.jsxs)("header", { className: b(), children: [background && ((0, jsx_runtime_1.jsx)(components_1.Media, { className: b('background', {
                    ['full-width']: fullWidth,
                }), imageClassName: b('background-image'), videoClassName: b('background-video'), ...background, isBackground: true })), (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('wrapper'), children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(components_1.HeaderBreadcrumbs, { className: b('breadcrumbs'), ...breadcrumbs, theme: theme })), (0, jsx_runtime_1.jsxs)("div", { className: b('content', {
                                ['vertical-offset']: verticalOffset,
                            }), children: [overtitle && ((0, jsx_runtime_1.jsx)("div", { className: b('content-overtitle', { theme }), children: typeof overtitle === 'string' ? ((0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { tagName: "span", content: overtitle, modifiers: {
                                            constructor: true,
                                            constructorTheme: theme,
                                        } })) : (overtitle) })), (0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { size: "xl", colSizes: { all: 12 }, ...contentProps, buttons: buttonProps, theme: contentTheme })] }), media && ((0, jsx_runtime_1.jsx)("div", { className: b('media'), children: (0, jsx_runtime_1.jsx)("div", { className: b('media-container'), ref: mediaContainerRef, children: (0, jsx_runtime_1.jsx)(components_1.Media, { className: b('media-container-content', {
                                        ['round-corners']: media.roundCorners ?? true,
                                        vertical: isDesktop && isMediaVertical,
                                    }), ...media, disablePlayerAutoSizing: true, onIntrinsicSizeChange: onMediaIntrinsicSizeChange }) }) }))] }) })] }));
};
exports.default = Hero;
//# sourceMappingURL=Hero.js.map
