import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { HeaderBreadcrumbs, Media, YFMWrapper } from "../../components/index.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 { Grid } from "../../gravity-blocks/grid/index.js";
import { Content } from "../../sub-blocks/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import { useContainerAspectRatio } from "./hooks.js";
import './Hero.css';
const b = 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 } = useContainerAspectRatio();
    const isDesktop = useWindowWidth() > BREAKPOINTS.md;
    const isMediaVertical = mediaAspectRatio < mediaContainerAspectRatio;
    const contextTheme = useTheme();
    const theme = contentTheme === 'default' ? contextTheme : contentTheme;
    const background = getThemedValue(themedBackground, theme);
    const media = getThemedValue(themedMedia, theme);
    const buttonProps = React.useMemo(() => buttons?.map((buttonThemed) => {
        if (React.isValidElement(buttonThemed)) {
            return buttonThemed;
        }
        const button = getThemedValue(buttonThemed, theme);
        return {
            size: 'xl',
            ...button,
        };
    }), [buttons, theme]);
    const onMediaIntrinsicSizeChange = React.useCallback(({ width, height }) => setMediaAspectRatio(width / height), []);
    return (_jsxs("header", { className: b(), children: [background && (_jsx(Media, { className: b('background', {
                    ['full-width']: fullWidth,
                }), imageClassName: b('background-image'), videoClassName: b('background-video'), ...background, isBackground: true })), _jsx(Grid, { children: _jsxs("div", { className: b('wrapper'), children: [breadcrumbs && (_jsx(HeaderBreadcrumbs, { className: b('breadcrumbs'), ...breadcrumbs, theme: theme })), _jsxs("div", { className: b('content', {
                                ['vertical-offset']: verticalOffset,
                            }), children: [overtitle && (_jsx("div", { className: b('content-overtitle', { theme }), children: typeof overtitle === 'string' ? (_jsx(YFMWrapper, { tagName: "span", content: overtitle, modifiers: {
                                            constructor: true,
                                            constructorTheme: theme,
                                        } })) : (overtitle) })), _jsx(Content, { size: "xl", colSizes: { all: 12 }, ...contentProps, buttons: buttonProps, theme: contentTheme })] }), media && (_jsx("div", { className: b('media'), children: _jsx("div", { className: b('media-container'), ref: mediaContainerRef, children: _jsx(Media, { className: b('media-container-content', {
                                        ['round-corners']: media.roundCorners ?? true,
                                        vertical: isDesktop && isMediaVertical,
                                    }), ...media, disablePlayerAutoSizing: true, onIntrinsicSizeChange: onMediaIntrinsicSizeChange }) }) }))] }) })] }));
};
export default Hero;
//# sourceMappingURL=Hero.js.map
