'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var reactHookForm = require('react-hook-form');
var useHealthToolCache = require('./useHealthToolCache-d6ee00f6.js');
var constants = require('./constants-762249c4.js');
var core = require('@mantine/core');
var index$2 = 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$5 = require('./index-59a9827e.js');
require('./index.styles-691de58f.js');
var index = require('./index-3643ff1b.js');
require('@mantine/hooks');
require('./utils-b92a8b1c.js');
require('./index-eba09ec0.js');
var index$3 = require('./index-8df498d5.js');
var ChevronDown = require('./ChevronDown-8067b030.js');
var context = require('./context-f7fe7a26.js');
var index$4 = require('./index-d11d2b22.js');
require('@hhgtech/icons/other');
var Locale = require('./Locale-fbe01177.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var embeddedHeathToolCards_helpers = require('./embeddedHeathToolCards_helpers.js');

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

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

const Question1Label = (_a) => {
    var { LabelWrapper } = _a, props = tslib_es6.__rest(_a, ["LabelWrapper"]);
    const { t } = index.useTranslations();
    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
    const Component = LabelWrapper || index$1.Text;
    return (React__default["default"].createElement(Component, Object.assign({}, labelProps), t('bmi.question.weightLossSupport')));
};
const Question2Label = (_a) => {
    var { LabelWrapper } = _a, props = tslib_es6.__rest(_a, ["LabelWrapper"]);
    const { t } = index.useTranslations();
    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
    const Component = LabelWrapper || index$1.Text;
    return (React__default["default"].createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness')));
};
const Question2Description = (_a) => {
    var { LabelWrapper } = _a, props = tslib_es6.__rest(_a, ["LabelWrapper"]);
    const { t } = index.useTranslations();
    const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
    const Component = LabelWrapper || index$1.Text;
    return (React__default["default"].createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness.desc')));
};

const BmiFormContext = React.createContext({});

var useStyles$1 = core.createStyles(() => {
    return {
        label: {
            marginTop: 2,
            cursor: 'pointer',
            userSelect: 'none',
        },
    };
});

const NewsletterCheckbox = (_a) => {
    var { labelTextProps, checked: checkedProps, LabelWrapper, useCollapse = true } = _a, props = tslib_es6.__rest(_a, ["labelTextProps", "checked", "LabelWrapper", "useCollapse"]);
    const { t } = index.useTranslations();
    const [show, setShow] = React.useState(!useCollapse);
    const [firstTime, setFirstTime] = React.useState(true);
    const [checked, setChecked] = React.useState(checkedProps);
    const labelProps = !LabelWrapper ? Object.assign({ size: 'p3' }, labelTextProps) : {};
    const Component = LabelWrapper || index$1.Text;
    const { classes } = useStyles$1(undefined, { name: 'NewsletterCheckbox' });
    return (React__default["default"].createElement(core.Flex, { gap: 8, align: 'flex-start' },
        React__default["default"].createElement(index$2.Checkbox, Object.assign({}, props, { label: undefined, size: "sm", checked: checked, onChange: (event) => {
                if (firstTime) {
                    setFirstTime(false);
                }
                else {
                    setChecked(event.currentTarget.checked);
                }
            }, styles: {
                labelWrapper: {
                    display: 'none',
                },
            } })),
        React__default["default"].createElement(core.Box, null,
            React__default["default"].createElement(Component, Object.assign({}, labelProps, { onClick: () => {
                    useCollapse && setShow((v) => !v);
                }, className: classes.label, lineClamp: show ? undefined : 1 }), t('bmi.newsletter.label')))));
};

const FitnessToolUnitPicker = ({ displayValue, field, onChange, }) => {
    const theme = core.useMantineTheme();
    const borderColor = theme.colors.gray[1];
    const options = field === 'height'
        ? [
            { label: 'cm', system: 'metric' },
            { label: 'ft', system: 'imperial' },
        ]
        : [
            { label: 'kg', system: 'metric' },
            { label: 'lbs', system: 'imperial' },
        ];
    return (React__default["default"].createElement(core.Menu, { position: "bottom-end", withinPortal: true, offset: 0, styles: {
            dropdown: {
                backgroundColor: theme.white,
                border: `${core.rem(1)} solid ${borderColor}`,
                borderRadius: 12,
                boxShadow: '0px 0px 1px 0px #0000000A,0px 2px 8px 0px #0000000A,0px 10px 16px 0px #0000000A',
                padding: core.rem(4),
                minWidth: core.rem(90),
            },
            item: {
                fontSize: theme.fontSizes.sm,
                lineHeight: 1.4,
                padding: `${core.rem(6)} ${core.rem(10)}`,
                borderRadius: theme.radius.xs,
                color: theme.colors.dark[9],
                '&[data-hovered]': {
                    backgroundColor: 'transparent',
                },
            },
        } },
        React__default["default"].createElement(core.Menu.Target, null,
            React__default["default"].createElement(core.UnstyledButton, { type: "button", sx: (theme) => ({
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'flex-end',
                    width: '100%',
                    paddingRight: theme.spacing.xs,
                    gap: 4,
                }) },
                React__default["default"].createElement(core.Text, { component: "span", size: "sm", sx: { lineHeight: 1 } }, displayValue),
                React__default["default"].createElement(ChevronDown.ChevronDown, { style: { width: 18, height: 18 } }))),
        React__default["default"].createElement(core.Menu.Dropdown, null, options.map((opt) => {
            const isSelected = displayValue === opt.label;
            return (React__default["default"].createElement(core.Menu.Item, { key: opt.label, onClick: () => onChange(opt.system, field), sx: {
                    backgroundColor: isSelected ? theme.colors.gray[1] : undefined,
                    '&[data-hovered]': {
                        backgroundColor: isSelected
                            ? theme.colors.gray[1]
                            : 'transparent',
                    },
                } }, opt.label));
        }))));
};

const DefaultForm = (props) => {
    var _a, _b, _c, _d, _e, _f, _g;
    const { t, locale } = index.useTranslations();
    const { classes: cardWrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    const { control, bmiGenerated, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = React.useContext(BmiFormContext);
    const radioStyle = {
        body: {
            alignItems: 'center',
        },
    };
    return (React__default["default"].createElement(index$3.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
        React__default["default"].createElement(HealthToolDefaultLayout$1, { isMobile: props.isMobile, gutter: 4 },
            React__default["default"].createElement(core.Stack, { spacing: 4, px: 16 },
                React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
                        return (React__default["default"].createElement("div", null,
                            React__default["default"].createElement(HealthToolDefaultLayout$1.GenderControl, { LabelWrapper: HealthToolDefaultLayout$1.Label, error: undefined, onChange: onChange, gap: 4 }),
                            (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                    } }),
                React__default["default"].createElement(reactHookForm.Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                        return (React__default["default"].createElement("div", null,
                            React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["default"].createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.ageInput')), placeholder: t('tools.inputPlaceholder', {
                                    content: '25',
                                }), name: name, value: value, onChange: onChange, min: 0, rightSection: t('bmi.ageInput.desc'), classNames: {
                                    rightSection: formWrapperClasses.inputRightSection,
                                } }),
                            (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                    } }),
                React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                        return (React__default["default"].createElement("div", null,
                            React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["default"].createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.heightInput')), placeholder: t('tools.inputPlaceholder', {
                                    content: unitSystem === 'imperial' ? 6 : 170,
                                }), name: name, value: value, onChange: onChange, min: 0, precision: 1, inputMode: "decimal", rightSection: enableUnitPicker ? (React__default["default"].createElement(FitnessToolUnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange })) : (t('bmi.heightInput.desc')), rightSectionWidth: 70, classNames: {
                                    rightSection: formWrapperClasses.inputRightSection,
                                }, styles: !enableUnitPicker
                                    ? () => ({
                                        rightSection: {
                                            paddingRight: 0,
                                        },
                                    })
                                    : undefined }),
                            (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                    } }),
                React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                        return (React__default["default"].createElement("div", null,
                            React__default["default"].createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default["default"].createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.weightInput')), placeholder: t('tools.inputPlaceholder', {
                                    content: unitSystem === 'imperial' ? 130 : 60,
                                }), name: name, value: value, onChange: onChange, precision: 1, inputMode: "decimal", min: 0, rightSection: enableUnitPicker ? (React__default["default"].createElement(FitnessToolUnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange })) : (t('bmi.weightInput.desc')), rightSectionWidth: 70, classNames: {
                                    rightSection: formWrapperClasses.inputRightSection,
                                }, styles: !enableUnitPicker
                                    ? () => ({
                                        rightSection: {
                                            paddingRight: 0,
                                        },
                                    })
                                    : undefined }),
                            (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                    } })),
            withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                React__default["default"].createElement(core.Stack, { spacing: 4, px: 16 },
                    React__default["default"].createElement(reactHookForm.Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
                            return (React__default["default"].createElement("div", null,
                                React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(Question1Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg" },
                                    React__default["default"].createElement(core.Flex, { gap: "lg" },
                                        React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
                                        React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
                                (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                        } }),
                    React__default["default"].createElement(reactHookForm.Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                            return (React__default["default"].createElement("div", null,
                                React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(Question2Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg", description: locale !== Locale.LOCALE.Malaysia && (React__default["default"].createElement(Question2Description, { LabelWrapper: HealthToolDefaultLayout$1.SubLabel })) },
                                    React__default["default"].createElement(core.Flex, { gap: "lg" },
                                        React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
                                        React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: React__default["default"].createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
                                (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
                        } })),
                React__default["default"].createElement(core.Box, { className: core.clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
                    React__default["default"].createElement(core.Stack, { spacing: 8, px: 16, py: 12 },
                        React__default["default"].createElement(reactHookForm.Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
                                var _b = _a.field, { value, onChange, name } = _b, field = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
                                return (React__default["default"].createElement(NewsletterCheckbox, Object.assign({ size: "sm", onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
                            } }),
                        React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit')))))) : (React__default["default"].createElement(core.Box, { px: 16, sx: { paddingBottom: 8 } },
                React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit')))))));
};

var useStyles = core.createStyles((theme) => {
    return {
        newsletterBlock: {
            backgroundColor: theme.colors.neutral[0],
            borderBottomLeftRadius: 'inherit',
            borderBottomRightRadius: 'inherit',
            '.bmi-btn': {
                marginTop: 0,
            },
        },
        inputRightSection: {
            fontSize: core.rem(13),
            lineHeight: core.rem(24),
            color: theme.colors.gray[4],
            justifyContent: 'flex-end',
            paddingRight: 8,
            whiteSpace: 'nowrap',
        },
    };
});

const InlineForm = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const { t, locale } = index.useTranslations();
    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = React.useContext(BmiFormContext);
    const { classes: wrapperClasses = {}, variant: cardWrapperVariant } = React.useContext(context.CardWrapperContext);
    const { classes: formWrapperClasses = {} } = React.useContext(BmiFormContext);
    return (React__default["default"].createElement(index$3.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
        React__default["default"].createElement(reactHookForm.Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
                return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                        React__default["default"].createElement(index$4.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange }))));
            } }),
        React__default["default"].createElement(reactHookForm.Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
                                content: '25',
                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
                                rightSection: {
                                    width: 'auto',
                                },
                            }) }))));
            } }),
        React__default["default"].createElement(reactHookForm.Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
                                content: unitSystem === 'imperial' ? 6 : 170,
                            }), name: name, value: value, onChange: onChange, min: 0, precision: 1, inputMode: "decimal", error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: enableUnitPicker ? (React__default["default"].createElement(FitnessToolUnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange })) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.heightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
                                ? () => ({
                                    rightSection: {
                                        paddingRight: 0,
                                    },
                                })
                                : undefined }))));
            } }),
        React__default["default"].createElement(reactHookForm.Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                    React__default["default"].createElement(index$3.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
                                content: unitSystem === 'imperial' ? 130 : 60,
                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, inputMode: "decimal", min: 0, rightSection: enableUnitPicker ? (React__default["default"].createElement(FitnessToolUnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange })) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.weightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
                                ? () => ({
                                    rightSection: {
                                        paddingRight: 0,
                                    },
                                })
                                : undefined }))));
            } }),
        withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
            React__default["default"].createElement(reactHookForm.Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
                    return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                        React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg" },
                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$2.ErrorLabel, { label: error.message, textProps: {
                                size: 'p4',
                            }, sx: { marginTop: 6 } }))));
                } }),
            React__default["default"].createElement(reactHookForm.Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                    return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                        React__default["default"].createElement(index$2.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== Locale.LOCALE.Malaysia && (React__default["default"].createElement(index$1.Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))) },
                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
                                React__default["default"].createElement(index$2.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$2.ErrorLabel, { label: error.message, textProps: {
                                size: 'p4',
                            }, sx: { marginTop: 6 } }))));
                } }),
            cardWrapperVariant === 'gray' || cardWrapperVariant === 'violet' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                React__default["default"].createElement(reactHookForm.Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
                        var _b = _a.field, { value, onChange, name } = _b, field = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
                        return (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, null,
                            React__default["default"].createElement(index$2.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$1.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field))));
                    } }),
                React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, { className: core.clsx(wrapperClasses.submitWrapper) },
                    React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: core.clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, { py: 16, className: core.clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
                React__default["default"].createElement(core.Stack, { spacing: 16 },
                    React__default["default"].createElement(reactHookForm.Controller, { name: "newsletter", control: control, rules: (_h = bmiGenerated.newsletter) === null || _h === void 0 ? void 0 : _h.rule, render: (_a) => {
                            var _b = _a.field, { value, onChange, name } = _b, field = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
                            return (React__default["default"].createElement(NewsletterCheckbox, Object.assign({ size: "sm", labelTextProps: { size: 'p4' }, onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value, useCollapse: false }, field)));
                        } }),
                    React__default["default"].createElement(core.Box, { className: core.clsx(wrapperClasses.submitWrapper) },
                        React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: core.clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))))))) : (React__default["default"].createElement(index$3.HealthToolFormWrapper.FormRow, { className: core.clsx(wrapperClasses.submitWrapper) },
            React__default["default"].createElement(index$3.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))));
};

const BmiForm = (_a) => {
    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, defaultUnitSystem, enableUnitPicker = true, formLayout = 'default', submitProps, withAdditionalQuestion, isMobile } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "defaultUnitSystem", "enableUnitPicker", "formLayout", "submitProps", "withAdditionalQuestion", "isMobile"]);
    const { classes } = useStyles(undefined, { name: 'BmiForm' });
    const { locale } = index.useTranslations();
    const [isTouched, setIsTouched] = React.useState(false);
    const initialUnitSystem = React.useMemo(() => defaultUnitSystem || 'metric', [defaultUnitSystem]);
    const [unitSystem, setUnitSystem] = React.useState(initialUnitSystem);
    const { control, handleSubmit, setValue, watch } = reactHookForm.useForm({
        defaultValues: {
            question1: undefined,
            question2: undefined,
            newsletter: true,
        },
    });
    const data = watch();
    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
    const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
    const unitHeight = unitSystem === 'imperial' ? 'ft' : 'cm';
    const unitWeight = unitSystem === 'imperial' ? 'lbs' : 'kg';
    const convertHeightToCm = (value) => unitSystem === 'imperial' ? value * 30.48 : value;
    const convertWeightToKg = (value) => unitSystem === 'imperial' ? value * 0.45359237 : value;
    const onValid = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
        const rawHeight = typeof data.height === 'number' ? data.height : Number(data.height);
        const rawWeight = typeof data.weight === 'number' ? data.weight : Number(data.weight);
        const submitValue = enableUnitPicker
            ? Object.assign(Object.assign({}, data), { bmi: embeddedHeathToolCards_helpers.getBmi({
                    height: convertHeightToCm(rawHeight),
                    weight: convertWeightToKg(rawWeight),
                }), unit: unitSystem }) : (() => {
            const height = bmiUnit.heightConvert(rawHeight);
            const weight = bmiUnit.weightConvert(rawWeight);
            return Object.assign(Object.assign({}, data), { height,
                weight, bmi: embeddedHeathToolCards_helpers.getBmi({ height, weight }) });
        })();
        onInValid();
        onSubmitProps && onSubmitProps(submitValue);
    });
    const onInValid = () => {
        setIsTouched(true);
    };
    React.useEffect(() => {
        Object.keys(valueProps || {}).forEach((k) => {
            const key = k;
            setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
                shouldTouch: false,
                shouldDirty: false,
                shouldValidate: false,
            });
        });
    }, [valueProps]);
    React.useEffect(() => {
        onChangeProps && onChangeProps(data);
    }, [data]);
    React.useEffect(() => {
        setUnitSystem(initialUnitSystem);
    }, [initialUnitSystem]);
    const onUnitChange = (next, _changedField) => {
        if (!enableUnitPicker)
            return;
        if (next === unitSystem)
            return;
        setUnitSystem(next);
        // Clear both inputs when unit changes to avoid mixing unit systems.
        // `Input.Number` in this repo supports `value` as `number | ''`,
        // so we clear with '' to make the UI reset properly.
        setValue('height', '', { shouldDirty: true, shouldValidate: false });
        setValue('weight', '', { shouldDirty: true, shouldValidate: false });
    };
    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
    return (React__default["default"].createElement(index$5.TemplateProvider, { variant: index$5.CustomStylesType.LEADGEN },
        React__default["default"].createElement(BmiFormContext.Provider, { value: {
                control,
                bmiGenerated,
                isTouched,
                linkTool,
                submitProps,
                withAdditionalQuestion,
                classes,
                enableUnitPicker,
                unitSystem,
                unitHeight,
                unitWeight,
                onUnitChange,
            } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps, { isMobile: isMobile }))))));
};

const HealthToolDefaultLayoutContext = React.createContext({});

const Row = (_a) => {
    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
    const { gutter } = React.useContext(HealthToolDefaultLayoutContext);
    return (React__default["default"].createElement(core.Grid, Object.assign({ gutter: gutter }, props), children));
};
const Col = (_a) => {
    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
    return (React__default["default"].createElement(core.Grid.Col, Object.assign({ span: 12 }, props), children));
};
const Label = (_a) => {
    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
    const { labelSize } = React.useContext(HealthToolDefaultLayoutContext);
    return (React__default["default"].createElement(index$1.Text, Object.assign({ size: labelSize, weight: "semiBold" }, props, { span: true }), children));
};
const OptionLabel = (_a) => {
    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
    const { optionLabelSize } = React.useContext(HealthToolDefaultLayoutContext);
    return (React__default["default"].createElement(index$1.Text, Object.assign({ size: optionLabelSize, weight: "regular" }, props, { span: true }), children));
};
const SubLabel = (_a) => {
    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
    const { subLabelSize } = React.useContext(HealthToolDefaultLayoutContext);
    return (React__default["default"].createElement(index$1.Text, Object.assign({ size: subLabelSize }, props), children));
};
const InputNumber = (_a) => {
    var { error } = _a, props = tslib_es6.__rest(_a, ["error"]);
    const { inputSize } = React.useContext(HealthToolDefaultLayoutContext);
    return (React__default["default"].createElement("div", null,
        React__default["default"].createElement(index$2.Input.Number, Object.assign({ size: inputSize }, props)),
        error && React__default["default"].createElement(Error, { label: error })));
};
const GenderControl = (props) => {
    const { inputSize } = React.useContext(HealthToolDefaultLayoutContext);
    return React__default["default"].createElement(index$4.GenderOptionControl, Object.assign({ size: inputSize }, props));
};
const Error = (props) => {
    const { errorLabelSize } = React.useContext(HealthToolDefaultLayoutContext);
    return (React__default["default"].createElement(index$2.ErrorLabel, Object.assign({ textProps: { size: errorLabelSize }, sx: { marginTop: 5 } }, props)));
};
const HealthToolDefaultLayout = (_a) => {
    var _b, _c, _d, _e, _f, _g;
    var { children, isMobile } = _a, props = tslib_es6.__rest(_a, ["children", "isMobile"]);
    const merged = Object.assign({ isMobile, labelSize: (_b = props.labelSize) !== null && _b !== void 0 ? _b : (isMobile ? 'p2' : 's4'), subLabelSize: (_c = props.subLabelSize) !== null && _c !== void 0 ? _c : 'subText', optionLabelSize: (_d = props.optionLabelSize) !== null && _d !== void 0 ? _d : (isMobile ? 'p2' : 's4'), inputSize: (_e = props.inputSize) !== null && _e !== void 0 ? _e : (isMobile ? 'sm' : 'md'), gutter: (_f = props.gutter) !== null && _f !== void 0 ? _f : (isMobile ? 4 : 12), errorLabelSize: (_g = props.errorLabelSize) !== null && _g !== void 0 ? _g : 'p3' }, props);
    return (React__default["default"].createElement(HealthToolDefaultLayoutContext.Provider, { value: merged }, children));
};
var HealthToolDefaultLayout$1 = Object.assign(HealthToolDefaultLayout, {
    Row,
    Col,
    SubLabel,
    Label,
    OptionLabel,
    Input: index$2.Input,
    InputNumber,
    GenderControl,
    Error,
});

exports.BmiForm = BmiForm;
exports.FitnessToolUnitPicker = FitnessToolUnitPicker;
exports.HealthToolDefaultLayout = HealthToolDefaultLayout$1;
exports.NewsletterCheckbox = NewsletterCheckbox;
exports.Question1Label = Question1Label;
exports.Question2Description = Question2Description;
exports.Question2Label = Question2Label;
