'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var core = require('@mantine/core');
var core$1 = require('@hhgtech/icons/core');
var other = require('@hhgtech/icons/other');
require('./index-1e5e2223.js');
require('@mantine/dates');
require('./index-6ce6e395.js');
require('./index-da3b86cd.js');
require('./index-b0ce6f8f.js');
require('./index-024542ed.js');
var index$1 = require('./index-a31ed3e1.js');
require('./index-3d563586.js');
var index$2 = require('./index-59a9827e.js');
require('./index.styles-691de58f.js');
var index = require('./index-3643ff1b.js');
require('@mantine/hooks');
var utils = require('./utils-b92a8b1c.js');
require('./index-eba09ec0.js');
var context = require('./context-f7fe7a26.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
const StyledInnerClass = 'hhgcomp-toolbanner-inner';
const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
const useStyles$3 = core.createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
    wrapper: {
        position: 'relative',
        width: '100%',
        height: '100%',
        display: 'flex',
        gap: core.rem(24),
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: core.rem(16),
        [theme.fn.smallerThan('sm')]: {
            gap: core.rem(12),
        },
    },
    container: {
        width: '100%',
        backgroundColor: bannerColor ||
            (isMarryBaby
                ? theme.colors.mb[1]
                : isPregTool
                    ? theme.colors.pink[1]
                    : theme.colors.blue[1]),
        position: 'relative',
        display: 'flex',
        gap: 24,
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: core.rem(16),
        [theme.fn.smallerThan('sm')]: {
            padding: `${core.rem(12)} ${core.rem(16)}`,
        },
        a: {
            textDecoration: 'none',
            color: 'inherit',
        },
        '&[data-site="marryBaby"]': {
            a: {
                textDecoration: 'underline',
            },
            [utils.MediaQueries.mbDown]: {
                paddingBottom: 0,
            },
        },
        [utils.MediaQueries.tdDown]: {
            height: 'auto',
            [`.${StyledWrapperClass}`]: {
                [`.${StyledInnerClass}`]: {
                    display: 'flex',
                    alignItems: 'center',
                    [utils.MediaQueries.mbDown]: {
                        justifyContent: 'space-between',
                    },
                    [`.${StyledIconContainerClass}`]: {
                        position: 'relative',
                        right: core.rem(-50),
                        bottom: core.rem(-20),
                        width: core.rem(110),
                        minWidth: 0,
                        height: 'auto',
                        minHeight: 0,
                        alignSelf: 'flex-end',
                        marginBottom: core.rem(-20),
                        [utils.MediaQueries.mbDown]: {
                            right: 'unset',
                        },
                    },
                },
            },
        },
        '.embedded-review': {
            gap: core.rem(12),
            display: 'flex',
            alignItems: 'center',
        },
        '.embedded-review__avatar': {
            position: 'relative',
            minWidth: core.rem(32),
            img: {
                width: core.rem(32),
                height: core.rem(32),
                display: 'block',
                borderRadius: '100%',
            },
            svg: {
                bottom: 0,
                right: 0,
                position: 'absolute',
            },
        },
    },
    headingWrapper: {
        display: 'flex',
        flexDirection: 'column',
        gap: isRevamp ? core.rem(8) : 0,
        [theme.fn.smallerThan('sm')]: {
            gap: 4,
        },
    },
    avatarWrapper: {
        position: 'relative',
        img: {
            maxWidth: core.rem(48),
            maxHeight: core.rem(48),
        },
        '.embedded-review__avatar': {
            position: 'relative',
        },
    },
    reviewText: {
        a: {
            textDecoration: 'underline',
            textUnderlineOffset: '2px',
        },
    },
    iconWrapper: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: core.rem(80),
        height: core.rem(80),
        borderRadius: '50%',
        backgroundColor: '#fff',
        flexShrink: 0,
        img: {
            maxWidth: core.rem(48),
            maxHeight: core.rem(48),
        },
        [theme.fn.smallerThan('sm')]: {
            width: core.rem(64),
            height: core.rem(64),
            img: {
                maxWidth: core.rem(40),
                maxHeight: core.rem(40),
            },
        },
    },
    heading: {},
    disclaimerIcon: {
        flexShrink: 0,
    },
}));

const ToolsBannerCard = (_a) => {
    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, disclaimer, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "disclaimer", "styles"]);
    const { t } = index.useTranslations();
    const theme = core.useMantineTheme();
    const isMarryBaby = theme.other.template === 'mb';
    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
    const headingAs = 'h2';
    const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
        name: 'ToolsBannerCard',
        styles,
        classNames,
    });
    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default["default"].createElement(index$1.Text, { size: "label2", as: "div", className: classes.reviewText },
        medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
            React__default["default"].createElement(core.Box, { className: classes.avatarWrapper },
                React__default["default"].createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
                React__default["default"].createElement(other.RedCross, { size: 14 })))),
        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
                __html: t('toolPage.toolReviewer', {
                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
                    date: medicalReview.date,
                }),
            } }))) : null;
    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
        React__default["default"].createElement(core.Flex, { className: classes.headingWrapper },
            React__default["default"].createElement(index$1.Text, { className: cx(classes.heading, 'heading'), size: 'h4', as: headingAs }, heading),
            medicalReviewEle && React__default["default"].createElement(index$1.Text, { size: "n1" }, medicalReviewEle),
            disclaimer && (React__default["default"].createElement(core.Flex, { gap: 4 },
                React__default["default"].createElement(core$1.Warning, { size: 16, color: theme.colors.yellow[8], className: classes.disclaimerIcon }),
                React__default["default"].createElement(index$1.Text, { size: "c1", variant: "secondary" }, disclaimer)))),
        React__default["default"].createElement(core.Flex, { className: classes.iconWrapper }, icon)));
};

var useStyles$2 = core.createStyles(() => {
    return {
        root: {
            borderTopLeftRadius: 'inherit',
            borderTopRightRadius: 'inherit',
        },
    };
});

const Banner = (_a) => {
    var { className, classNames, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "styles"]);
    const { classes: wrapperClasses } = React.useContext(context.CardWrapperContext);
    const { isPregTool } = React.useContext(context.CardWrapperContext);
    const { classes, cx } = useStyles$2(undefined, {
        name: 'HealthToolCardWrapper__Banner',
        classNames,
        styles,
    });
    return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
            container: wrapperClasses.bannerWrapper,
            heading: wrapperClasses.bannerHeading,
            reviewText: wrapperClasses.bannerReviewText,
        }, className: cx(className, classes.root) }, rest)));
};

var useStyles$1 = core.createStyles((theme) => {
    return {
        root: {
            paddingTop: 16,
            borderRadius: 'inherit',
            [theme.fn.smallerThan('sm')]: {
                paddingTop: 8,
            },
        },
    };
});

const Body = (_a) => {
    var { children, className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "styles", "classNames"]);
    const { classes: wrapperClasses, hasBodyScroll } = React.useContext(context.CardWrapperContext);
    const { classes, cx } = useStyles$1(undefined, {
        name: 'HealthToolCardWrapper__Body',
        styles,
        classNames,
    });
    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default["default"].createElement(core.ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
};

var useStyles = core.createStyles((theme, { isPregTool, variant }) => {
    const isMarryBaby = theme.other.template === 'mb';
    return {
        root: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: core.rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
            backgroundColor: '#fff',
            border: `1px solid ${isMarryBaby
                ? theme.colors.mb[2]
                : isPregTool
                    ? theme.colors.pink[1]
                    : theme.colors.blue[2]}`,
        })), (variant === 'gray' && {
            backgroundColor: theme.colors.neutral[0],
        })), (variant === 'violet' && {
            backgroundColor: theme.colors.violet[0],
        })),
        submitBtn: {},
        bodyWrapper: {},
        scrollAreaWrapper: {},
        bannerWrapper: Object.assign(Object.assign({}, (variant === 'gray' && {
            backgroundColor: 'transparent',
            padding: `${core.rem(16)} ${core.rem(16)} 0`,
        })), (variant === 'violet' && {
            backgroundColor: 'transparent',
            padding: `${core.rem(16)} ${core.rem(16)} 0`,
        })),
        bannerHeading: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
            fontSize: core.rem(20),
            lineHeight: core.rem(28),
            fontWeight: index$2.FontWeight.semiBold,
            [theme.fn.smallerThan('sm')]: {
                fontSize: core.rem(17),
                lineHeight: core.rem(24),
            },
        })),
        bannerReviewText: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
            fontSize: core.rem(14),
            lineHeight: core.rem(22),
            [theme.fn.smallerThan('sm')]: {
                fontSize: core.rem(12),
                lineHeight: core.rem(18),
            },
        })),
        submitWrapper: Object.assign(Object.assign({ [theme.fn.smallerThan('sm')]: {
                button: {
                    width: '100%',
                },
            }, [theme.fn.largerThan('sm')]: {
                textAlign: 'right',
            } }, (variant === 'gray' && {
            backgroundColor: theme.colors.neutral[0],
            button: {
                marginTop: 10,
            },
        })), (variant === 'violet' && {
            backgroundColor: theme.colors.violet[0],
            button: {
                marginTop: 10,
            },
        })),
        newsletterBlock: Object.assign(Object.assign({}, (variant === 'gray' && {
            backgroundColor: theme.colors.neutral[0],
        })), (variant === 'violet' && {
            backgroundColor: theme.colors.violet[0],
        })),
    };
});

const _HealthToolCardWrapper = (_a) => {
    var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
    const { classes, cx } = useStyles({ isPregTool, variant }, {
        name: 'HealthToolCardWrapper',
        styles,
        classNames,
    });
    return (React__default["default"].createElement(index$2.TemplateProvider, { variant: index$2.CustomStylesType.LEADGEN },
        React__default["default"].createElement(context.CardWrapperContext.Provider, { value: {
                isPregTool,
                classes,
                variant,
                hasBodyScroll,
            } },
            React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children))));
};
const HealthToolCardWrapper = _HealthToolCardWrapper;
HealthToolCardWrapper.Body = Body;
HealthToolCardWrapper.Banner = Banner;

exports.HealthToolCardWrapper = HealthToolCardWrapper;
exports.ToolsBannerCard = ToolsBannerCard;
