import { _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { createContext, useContext } from 'react';
import { createStyles, rem, useMantineTheme, clsx } from '@mantine/core';
import { useForm, isNotEmpty } from '@mantine/form';
import { I as Input } from './index-c3177e04.js';
import { D as DatePicker } from './index-122829d2.js';
import { T as Text } from './index-d0a1200e.js';
import './index-f71a880f.js';
import { theme } from './miscTheme.js';
import './index-38e03570.js';
import './index.styles-3ba274d2.js';
import { u as useTranslations } from './index-960c3169.js';
import '@mantine/hooks';
import './index-4e6b8a2b.js';
import './utils-32d7d5af.js';
import './index-f21110d2.js';
import { C as CardWrapperContext } from './context-e9fa0aef.js';
import { I as INPUT_RANGE } from './constants-2f2c9886.js';
import { H as HealthToolFormWrapper } from './index-70e81356.js';
import { G as GenderOptionControl } from './index-f3c67a5d.js';
import { L as LOCALE } from './Locale-87b46912.js';
import { CalendarMB } from '@hhgtech/icons/other';

const BabyGrowthFormContext = createContext({});

const DefaultForm = (props) => {
    const { t, locale } = useTranslations();
    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
    const commonDateProps = {
        placeholder: 'DD/MM/YYYY',
        popoverProps: {
            withinPortal: true,
        },
    };
    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.Control, null,
                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
                        male: 'boy',
                        female: 'girl',
                    } }, form.getInputProps('gender'), { error: null }))),
            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.birthday')) },
                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
                        v && form.validateField('measurementDate');
                        form.getInputProps('birthday').onChange(v);
                    } }))),
            form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
                    t('babyGrowth.height'),
                    React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
                    form.setFieldValue('height', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
                    t('babyGrowth.weight'),
                    React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.kg')})`)) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
                    form.setFieldValue('weight', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        locale !== LOCALE.Vietnam && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
                    t('babyGrowth.head'),
                    React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
                    form.setFieldValue('head', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } })))),
        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.measurementDate')) },
                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit')))));
};

var useStyles = createStyles((theme) => {
    return {
        root: {
            display: 'flex',
            flexDirection: 'column',
            gap: rem(8),
        },
        bmiVal: {
            display: 'inline-block',
        },
        unitText: {
            color: theme.colors.gray[6],
        },
        submitBtn: {},
    };
});

/**
 * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
 * @param {number} num - Number to convert
 * @param {number} maximumFractionDigits - Number of decimal digits
 * @returns {string} - String based number
 */
const localizeNumberFormat = (num, maximumFractionDigits = 2) => {
    return Intl.NumberFormat(undefined, {
        maximumFractionDigits,
    }).format(num);
};

/**
 * Calculate BMI
 * Using {@link localizeNumberFormat} to convert number based on locale
 * @param {number} height - Height in number
 * @param {number} weight - Weight in number
 * @returns {number} - BMI with 2 decimal digits
 */
const bmiCalculate = (height = 0, weight = 0) => {
    try {
        if (height && weight) {
            const bmi = Number(weight) / Math.pow(Number(height) / 100, 2);
            if (isNaN(bmi))
                return 0;
            return Number(localizeNumberFormat(bmi));
        }
        else {
            return 0;
        }
    }
    catch (error) { }
    return 0;
};

const InlineForm = (_a) => {
    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
    const { t, locale } = useTranslations();
    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
    const theme = useMantineTheme();
    const { classes } = useStyles(undefined, {
        name: 'BabyGrowthForm__InlineForm',
        styles,
        classNames,
    });
    const commonDateProps = {
        placeholder: 'DD/MM/YYYY',
        popoverProps: {
            withinPortal: true,
        },
    };
    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
                React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, isBaby: true, genderValue: {
                        male: 'boy',
                        female: 'girl',
                    } }, form.getInputProps('gender')))),
            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
                        v && form.validateField('measurementDate');
                        form.getInputProps('birthday').onChange(v);
                    } }))),
            form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
                    control: {
                        '&:first-child': {
                            width: 'auto',
                        },
                    },
                } },
                React__default.createElement(Text, { size: "p3" },
                    React__default.createElement("span", { className: classes.bmiVal }, form.getInputProps('height').value &&
                        form.getInputProps('weight').value &&
                        bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value))),
                    "(",
                    t('babyGrowth.kg.m2'),
                    ")"),
                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
                        form.setFieldValue('height', v);
                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
                        form.setFieldValue('weight', v);
                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
            (theme.other.template === 'mb' || locale !== LOCALE.Vietnam) && (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.head') },
                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
                        form.setFieldValue('head', v);
                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))),
            form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
};

const MbLayout = (_a) => {
    var props = __rest(_a, []);
    const { t } = useTranslations();
    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
    const commonDateProps = {
        placeholder: 'DD/MM/YYYY',
        popoverProps: {
            withinPortal: true,
        },
    };
    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.Control, null,
                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
                        male: 'boy',
                        female: 'girl',
                    } }, form.getInputProps('gender'), { error: null }))),
            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) },
            React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, rightSection: null, onChange: (v) => {
                    v && form.validateField('measurementDate');
                    form.getInputProps('birthday').onChange(v);
                } }))),
        form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday)),
        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.height'), rightSection: t('babyGrowth.cm') },
            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
                    content: '160',
                }), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
                    form.setFieldValue('height', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height)),
        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.weight'), rightSection: t('babyGrowth.kg') },
            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
                    content: '50',
                }), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
                    form.setFieldValue('weight', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight)),
        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.head'), rightSection: t('babyGrowth.cm') },
            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('tools.inputPlaceholder', {
                    content: '50',
                }), onChange: (v) => {
                    form.setFieldValue('head', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.measurementDate'), rightSection: React__default.createElement(CalendarMB, null) },
            React__default.createElement(Input.Wrapper, null,
                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, error: null })))),
        form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate)),
        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
};

const BabyGrowthForm = (_a) => {
    var { onSubmit, formLayout = 'default', submitProps, currentUrl } = _a, rest = __rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
    const { t } = useTranslations();
    const theme = useMantineTheme();
    const form = useForm({
        initialValues: {
            measurementDate: new Date(),
        },
        validate: {
            gender: isNotEmpty(t('validation.error.requiredField')),
            birthday: isNotEmpty(t('validation.error.requiredField')),
            measurementDate: (value, values) => {
                return values.birthday
                    ? values.birthday instanceof Date &&
                        value instanceof Date &&
                        values.birthday.getTime() <= value.getTime()
                        ? null
                        : t('babyGrowth.error.measurementDateLowerThanBirthday', {
                            name: '',
                        })
                    : null;
            },
            checkMesureVal: (_value, values) => {
                return (values.head === undefined &&
                    values.height === undefined &&
                    values.weight === undefined) ||
                    values.head ||
                    values.height ||
                    values.weight
                    ? null
                    : t('babyGrowth.error.atLeastOneOf');
            },
        },
        validateInputOnChange: ['checkMesureVal'],
    });
    const commonProps = Object.assign({ onSubmit: form.onSubmit((v) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, v), { bmi: bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value)).toString() }))) }, rest);
    return (React__default.createElement(BabyGrowthFormContext.Provider, { value: {
            submitProps,
            currentUrl,
            form,
        } }, formLayout === 'default' ? (theme.other.template === 'mb' ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
};

export { BabyGrowthForm as B };
