'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var form = require('@mantine/form');
var useHealthToolCache = require('./useHealthToolCache-d6ee00f6.js');
var index = require('./index-3643ff1b.js');
var index$6 = require('./index-b0ce6f8f.js');
var constants = require('./constants-762249c4.js');
var index$2 = require('./index-d11d2b22.js');
var index$5 = require('./index-1e5e2223.js');
var index$3 = require('./index-a11c6c43.js');
var index$4 = require('./index-a31ed3e1.js');
require('./index-3d563586.js');
require('@mantine/core');
require('./index-59a9827e.js');
require('./index.styles-691de58f.js');
require('@mantine/hooks');
require('./index-024542ed.js');
require('./utils-b92a8b1c.js');
require('./index-eba09ec0.js');
require('./index-6ce6e395.js');
var context = require('./context-f7fe7a26.js');
var index$1 = require('./index-8df498d5.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');

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

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

const ThrFormContext = React.createContext({});

const DefaultForm = (_a) => {
    var _b;
    var props = tslib_es6.__rest(_a, []);
    const { t, locale } = index.useTranslations();
    const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
                    withinPortal: true,
                }, label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.ageInput')), maxDate: new Date() }))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$5.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.heartRateInput')), placeholder: t('tools.inputPlaceholder', {
                    content: '60',
                }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
                    rightSection: {
                        width: 'auto',
                    },
                }) }))),
        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$5.Select, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.selectActive')), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
                    value: option.value,
                    label: option.label,
                })), styles: {
                    item: {
                        whiteSpace: 'nowrap',
                        padding: '10px 12px',
                        fontSize: '14px',
                    },
                }, withinPortal: true }, form.getInputProps('activeValue'))))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
};

const InlineForm = (_a) => {
    var _b;
    var props = tslib_es6.__rest(_a, []);
    const { t, locale } = index.useTranslations();
    const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
                React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, form.getInputProps('gender')))),
            form.errors.gender && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.gender))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.ageInput') },
                React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
                        withinPortal: true,
                    }, error: null, maxDate: new Date() }))),
            form.errors.age && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.age))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
                React__default["default"].createElement(index$5.Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
                        content: '60',
                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
                        rightSection: {
                            width: 'auto',
                        },
                    }) }))),
            form.errors.heartRate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.heartRate))),
        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
                React__default["default"].createElement(index$5.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
                        value: option.value,
                        label: option.label,
                    })), styles: {
                        item: {
                            whiteSpace: 'nowrap',
                            padding: '10px 12px',
                            fontSize: '14px',
                        },
                    }, withinPortal: true }, form.getInputProps('activeValue')))))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
};

const ThrForm = (_a) => {
    var { formLayout, onSubmit, onError, submitProps } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
    const { t, locale } = index.useTranslations();
    const minRange = React.useRef(40);
    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
    const form$1 = form.useForm({
        initialValues: {
            heartRate: 60,
            activeValue: 'low_intensity',
        },
        validate: {
            gender: form.isNotEmpty(t('validation.error.requiredField')),
            age: form.isNotEmpty(t('validation.error.requiredField')),
            heartRate: (value) => {
                return Number(value) >= minRange.current && Number(value) <= 200
                    ? null
                    : t('tools.heartRateRangeErr', {
                        min: minRange.current,
                        max: 200,
                    });
            },
        },
    });
    const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
    const [isAdult, setIsAdult] = React.useState(false);
    const rangeHeartRateByAge = [
        {
            idAge: 0,
            minAge: 0,
            maxAge: 18,
            rangeMale: 40,
            rangeFemale: 40,
        },
        {
            idAge: 1,
            minAge: 18,
            maxAge: 25,
            rangeMale: 49,
            rangeFemale: 54,
        },
        {
            idAge: 2,
            minAge: 25,
            maxAge: 35,
            rangeMale: 49,
            rangeFemale: 54,
        },
        {
            idAge: 3,
            minAge: 35,
            maxAge: 45,
            rangeMale: 50,
            rangeFemale: 54,
        },
        {
            idAge: 4,
            minAge: 45,
            maxAge: 55,
            rangeMale: 50,
            rangeFemale: 54,
        },
        {
            idAge: 5,
            minAge: 55,
            maxAge: 65,
            rangeMale: 51,
            rangeFemale: 54,
        },
        {
            idAge: 6,
            minAge: 65,
            maxAge: 120,
            rangeMale: 50,
            rangeFemale: 54,
        },
    ];
    const activeValueNote = [
        {
            value: 'low_intensity',
            label: t('targetHeartRate.lowIntensity.title'),
            image: index$6.CommonGAssets.getAssetPath(`/low.svg`),
            imageActive: index$6.CommonGAssets.getAssetPath(`/low-active.svg`),
            content: t('targetHeartRate.lowIntensity.note'),
        },
        {
            value: 'moderate_intensity',
            label: t('targetHeartRate.moderateIntensity.title'),
            image: index$6.CommonGAssets.getAssetPath(`/moderate.svg`),
            imageActive: index$6.CommonGAssets.getAssetPath(`/moderate-active.svg`),
            content: t('targetHeartRate.moderateIntensity.note'),
        },
        {
            value: 'aerobic_zone',
            label: t('targetHeartRate.aerobicZone.title'),
            image: index$6.CommonGAssets.getAssetPath(`/aerobic.svg`),
            imageActive: index$6.CommonGAssets.getAssetPath(`/aerobic-active.svg`),
            content: t('targetHeartRate.aerobicZone.note'),
        },
        {
            value: 'vigorous_intensity',
            label: t('targetHeartRate.vigorousIntensity.title'),
            image: index$6.CommonGAssets.getAssetPath(`/vigorous.svg`),
            imageActive: index$6.CommonGAssets.getAssetPath(`/vigorous-active.svg`),
            content: t('targetHeartRate.vigorousIntensity.note'),
        },
        {
            value: 'maximum_intensity',
            label: t('targetHeartRate.maximumIntensity.title'),
            image: index$6.CommonGAssets.getAssetPath(`/maximum.svg`),
            imageActive: index$6.CommonGAssets.getAssetPath(`/maximum-active.svg`),
            content: t('targetHeartRate.maximumIntensity.note'),
        },
    ];
    React.useEffect(() => {
        const ageDate = form$1.getInputProps('age').value;
        const gender = form$1.getInputProps('gender').value;
        if (ageDate instanceof Date) {
            const age = (new Date().getTime() - ageDate.getTime()) / 1000;
            if (age >= 18 * 365 * 24 * 60 * 60)
                setIsAdult(true);
            else
                setIsAdult(false);
            const rangeByAge = rangeHeartRateByAge.find((item) => age >= item.minAge * 365 * 24 * 60 * 60 &&
                age < item.maxAge * 365 * 24 * 60 * 60) || rangeHeartRateByAge[0];
            minRange.current =
                gender === 'male' ? rangeByAge.rangeMale : rangeByAge.rangeFemale;
        }
    }, [form$1]);
    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form$1.onSubmit(onSubmit, onError) });
    return (React__default["default"].createElement(ThrFormContext.Provider, { value: {
            isAdult,
            activeValueNote,
            linkTool,
            form: form$1,
            submitProps,
        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
};

exports.ThrForm = ThrForm;
