import { _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
import { useForm, isNotEmpty } from '@mantine/form';
import { u as useHealthToolsCache } from './useHealthToolCache-872bf831.js';
import { u as useTranslations } from './index-960c3169.js';
import { C as CommonGAssets } from './index-43584299.js';
import { H as HEALTH_TOOL_TYPE } from './constants-67be5c94.js';
import { G as GenderOptionControl } from './index-f3c67a5d.js';
import { I as Input, S as Select } 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 '@mantine/core';
import './index-38e03570.js';
import './index.styles-3ba274d2.js';
import '@mantine/hooks';
import './index-4e6b8a2b.js';
import './utils-32d7d5af.js';
import './index-f21110d2.js';
import './index-a8162282.js';
import { C as CardWrapperContext } from './context-e9fa0aef.js';
import { H as HealthToolFormWrapper } from './index-70e81356.js';
import { domainLocales } from './constantsDomainLocales.js';

const ThrFormContext = createContext({});

const DefaultForm = (_a) => {
    var _b;
    var props = __rest(_a, []);
    const { t, locale } = useTranslations();
    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
                    withinPortal: true,
                }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.ageInput')), maxDate: new Date() }))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(Select, Object.assign({ label: React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
};

const InlineForm = (_a) => {
    var _b;
    var props = __rest(_a, []);
    const { t, locale } = useTranslations();
    const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
                React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, 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('targetHeartRate.ageInput') },
                React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
                        withinPortal: true,
                    }, error: null, maxDate: new Date() }))),
            form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))),
        React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
                React__default.createElement(Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
                        content: '60',
                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
                        rightSection: {
                            width: 'auto',
                        },
                    }) }))),
            form.errors.heartRate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.heartRate))),
        isAdult && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
                React__default.createElement(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.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
};

const ThrForm = (_a) => {
    var { formLayout, onSubmit, onError, submitProps } = _a, rest = __rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
    const { t, locale } = useTranslations();
    const minRange = useRef(40);
    const { getHealthToolLink } = useHealthToolsCache(locale);
    const form = useForm({
        initialValues: {
            heartRate: 60,
            activeValue: 'low_intensity',
        },
        validate: {
            gender: isNotEmpty(t('validation.error.requiredField')),
            age: 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 = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
    const [isAdult, setIsAdult] = 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: CommonGAssets.getAssetPath(`/low.svg`),
            imageActive: CommonGAssets.getAssetPath(`/low-active.svg`),
            content: t('targetHeartRate.lowIntensity.note'),
        },
        {
            value: 'moderate_intensity',
            label: t('targetHeartRate.moderateIntensity.title'),
            image: CommonGAssets.getAssetPath(`/moderate.svg`),
            imageActive: CommonGAssets.getAssetPath(`/moderate-active.svg`),
            content: t('targetHeartRate.moderateIntensity.note'),
        },
        {
            value: 'aerobic_zone',
            label: t('targetHeartRate.aerobicZone.title'),
            image: CommonGAssets.getAssetPath(`/aerobic.svg`),
            imageActive: CommonGAssets.getAssetPath(`/aerobic-active.svg`),
            content: t('targetHeartRate.aerobicZone.note'),
        },
        {
            value: 'vigorous_intensity',
            label: t('targetHeartRate.vigorousIntensity.title'),
            image: CommonGAssets.getAssetPath(`/vigorous.svg`),
            imageActive: CommonGAssets.getAssetPath(`/vigorous-active.svg`),
            content: t('targetHeartRate.vigorousIntensity.note'),
        },
        {
            value: 'maximum_intensity',
            label: t('targetHeartRate.maximumIntensity.title'),
            image: CommonGAssets.getAssetPath(`/maximum.svg`),
            imageActive: CommonGAssets.getAssetPath(`/maximum-active.svg`),
            content: t('targetHeartRate.maximumIntensity.note'),
        },
    ];
    useEffect(() => {
        const ageDate = form.getInputProps('age').value;
        const gender = form.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]);
    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form.onSubmit(onSubmit, onError) });
    return (React__default.createElement(ThrFormContext.Provider, { value: {
            isAdult,
            activeValueNote,
            linkTool,
            form,
            submitProps,
        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
};

export { ThrForm as T };
