export function bmiCalculator(form: FormTs) {
form.addRow(row => {
row.addTextPanel('header', {
computedValue: () => 'BMI Calculator',
customStyles: { 'font-size': '1.5rem', 'font-weight': '600', 'color': '#1e293b' }
});
});
form.addSpacer({ height: 20 });
// Measurement System Section
const systemSection = form.addSubform('system', { title: '📐 Measurement System' });
systemSection.addRow(row => {
row.addRadioButton('units', {
label: 'Select Units',
options: [
{ id: 'imperial', name: 'Imperial (lbs, ft/in)' },
{ id: 'metric', name: 'Metric (kg, cm)' }
],
defaultValue: 'imperial',
isRequired: true
});
});
// Body Measurements Section
const measurementsSection = form.addSubform('measurements', { title: '⚖️ Your Measurements' });
// Imperial inputs
measurementsSection.addRow(row => {
row.addInteger('heightFeet', {
label: 'Height (feet)',
min: 3,
max: 8,
defaultValue: 5,
suffix: 'ft',
isRequired: true,
isVisible: () => systemSection.radioButton('units')?.value() === 'imperial'
}, '1fr');
row.addInteger('heightInches', {
label: 'Height (inches)',
min: 0,
max: 11,
defaultValue: 9,
suffix: 'in',
isRequired: true,
isVisible: () => systemSection.radioButton('units')?.value() === 'imperial'
}, '1fr');
});
measurementsSection.addRow(row => {
row.addDecimal('weightLbs', {
label: 'Weight',
min: 50,
max: 700,
defaultValue: 160,
suffix: 'lbs',
isRequired: true,
isVisible: () => systemSection.radioButton('units')?.value() === 'imperial'
});
});
// Metric inputs
measurementsSection.addRow(row => {
row.addInteger('heightCm', {
label: 'Height',
min: 100,
max: 250,
defaultValue: 175,
suffix: 'cm',
isRequired: true,
isVisible: () => systemSection.radioButton('units')?.value() === 'metric'
});
});
measurementsSection.addRow(row => {
row.addDecimal('weightKg', {
label: 'Weight',
min: 25,
max: 320,
defaultValue: 72,
suffix: 'kg',
isRequired: true,
isVisible: () => systemSection.radioButton('units')?.value() === 'metric'
});
});
// Additional Info Section
const infoSection = form.addSubform('info', { title: '👤 Additional Information' });
infoSection.addRow(row => {
row.addDropdown('ageGroup', {
label: 'Age Group',
options: [
{ id: 'child', name: 'Child (2-17 years)' },
{ id: 'adult', name: 'Adult (18-64 years)' },
{ id: 'senior', name: 'Senior (65+ years)' }
],
defaultValue: 'adult'
}, '1fr');
row.addDropdown('sex', {
label: 'Sex',
options: [
{ id: 'male', name: 'Male' },
{ id: 'female', name: 'Female' }
],
defaultValue: 'male',
tooltip: 'Used for healthy weight range recommendations'
}, '1fr');
});
infoSection.addRow(row => {
row.addDropdown('activityLevel', {
label: 'Activity Level',
options: [
{ id: 'sedentary', name: 'Sedentary (little/no exercise)' },
{ id: 'light', name: 'Light (exercise 1-3 days/week)' },
{ id: 'moderate', name: 'Moderate (exercise 3-5 days/week)' },
{ id: 'active', name: 'Active (exercise 6-7 days/week)' },
{ id: 'very-active', name: 'Very Active (intense daily exercise)' }
],
defaultValue: 'moderate',
tooltip: 'Used for calorie recommendations'
});
});
form.addSpacer({ height: 20, showLine: true, lineStyle: 'dashed' });
// Results Section
const resultsSection = form.addSubform('results', { title: '📊 Your Results', isCollapsible: false });
resultsSection.addRow(row => {
row.addPriceDisplay('bmiValue', {
label: 'Your BMI',
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
let heightM: number;
let weightKg: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const weightLbs = measurementsSection.decimal('weightLbs')?.value() || 160;
const totalInches = (feet * 12) + inches;
heightM = totalInches * 0.0254;
weightKg = weightLbs * 0.453592;
} else {
heightM = (measurementsSection.integer('heightCm')?.value() || 175) / 100;
weightKg = measurementsSection.decimal('weightKg')?.value() || 72;
}
const bmi = weightKg / (heightM * heightM);
return Math.round(bmi * 10) / 10;
},
variant: 'large',
prefix: '',
suffix: ''
});
});
resultsSection.addRow(row => {
row.addTextPanel('bmiCategory', {
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
let heightM: number;
let weightKg: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const weightLbs = measurementsSection.decimal('weightLbs')?.value() || 160;
const totalInches = (feet * 12) + inches;
heightM = totalInches * 0.0254;
weightKg = weightLbs * 0.453592;
} else {
heightM = (measurementsSection.integer('heightCm')?.value() || 175) / 100;
weightKg = measurementsSection.decimal('weightKg')?.value() || 72;
}
const bmi = weightKg / (heightM * heightM);
if (bmi < 18.5) return 'Category: Underweight';
if (bmi < 25) return 'Category: Normal Weight';
if (bmi < 30) return 'Category: Overweight';
if (bmi < 35) return 'Category: Obese (Class I)';
if (bmi < 40) return 'Category: Obese (Class II)';
return 'Category: Obese (Class III)';
},
customStyles: { 'font-size': '1.1rem', 'font-weight': '600', 'text-align': 'center', 'color': '#1e293b' }
});
});
resultsSection.addSpacer({ height: 15 });
resultsSection.addRow(row => {
row.addTextPanel('bmiScale', {
computedValue: () => {
return 'BMI Categories: Underweight (<18.5) | Normal (18.5-24.9) | Overweight (25-29.9) | Obese (30+)';
},
customStyles: { 'font-size': '0.85rem', 'color': '#64748b', 'text-align': 'center' }
});
});
// Healthy Weight Range Section
const rangeSection = form.addSubform('range', { title: '🎯 Healthy Weight Range', isCollapsible: false });
rangeSection.addRow(row => {
row.addPriceDisplay('minHealthyWeight', {
label: 'Minimum Healthy Weight',
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
let heightM: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const totalInches = (feet * 12) + inches;
heightM = totalInches * 0.0254;
} else {
heightM = (measurementsSection.integer('heightCm')?.value() || 175) / 100;
}
const minWeightKg = 18.5 * heightM * heightM;
if (units === 'imperial') {
return Math.round(minWeightKg / 0.453592);
}
return Math.round(minWeightKg);
},
variant: 'default',
prefix: '',
suffix: () => systemSection.radioButton('units')?.value() === 'imperial' ? ' lbs' : ' kg'
}, '1fr');
row.addPriceDisplay('maxHealthyWeight', {
label: 'Maximum Healthy Weight',
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
let heightM: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const totalInches = (feet * 12) + inches;
heightM = totalInches * 0.0254;
} else {
heightM = (measurementsSection.integer('heightCm')?.value() || 175) / 100;
}
const maxWeightKg = 24.9 * heightM * heightM;
if (units === 'imperial') {
return Math.round(maxWeightKg / 0.453592);
}
return Math.round(maxWeightKg);
},
variant: 'default',
prefix: '',
suffix: () => systemSection.radioButton('units')?.value() === 'imperial' ? ' lbs' : ' kg'
}, '1fr');
});
rangeSection.addRow(row => {
row.addTextPanel('weightDifference', {
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
let heightM: number;
let currentWeightKg: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const weightLbs = measurementsSection.decimal('weightLbs')?.value() || 160;
const totalInches = (feet * 12) + inches;
heightM = totalInches * 0.0254;
currentWeightKg = weightLbs * 0.453592;
} else {
heightM = (measurementsSection.integer('heightCm')?.value() || 175) / 100;
currentWeightKg = measurementsSection.decimal('weightKg')?.value() || 72;
}
const bmi = currentWeightKg / (heightM * heightM);
const minWeightKg = 18.5 * heightM * heightM;
const maxWeightKg = 24.9 * heightM * heightM;
if (bmi >= 18.5 && bmi <= 24.9) {
return 'Your weight is within the healthy range for your height.';
} else if (bmi < 18.5) {
const diff = minWeightKg - currentWeightKg;
const diffDisplay = units === 'imperial' ? Math.round(diff / 0.453592) + ' lbs' : Math.round(diff) + ' kg';
return `You are ${diffDisplay} below the healthy range.`;
} else {
const diff = currentWeightKg - maxWeightKg;
const diffDisplay = units === 'imperial' ? Math.round(diff / 0.453592) + ' lbs' : Math.round(diff) + ' kg';
return `You are ${diffDisplay} above the healthy range.`;
}
},
customStyles: { 'font-size': '0.95rem', 'color': '#475569', 'text-align': 'center', 'font-weight': '500' }
});
});
// Daily Calories Section
const caloriesSection = form.addSubform('calories', { title: '🔥 Daily Calorie Needs', isCollapsible: false });
caloriesSection.addRow(row => {
row.addPriceDisplay('bmr', {
label: 'Basal Metabolic Rate (BMR)',
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
const sex = infoSection.dropdown('sex')?.value() || 'male';
let heightCm: number;
let weightKg: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const weightLbs = measurementsSection.decimal('weightLbs')?.value() || 160;
heightCm = ((feet * 12) + inches) * 2.54;
weightKg = weightLbs * 0.453592;
} else {
heightCm = measurementsSection.integer('heightCm')?.value() || 175;
weightKg = measurementsSection.decimal('weightKg')?.value() || 72;
}
// Using Mifflin-St Jeor equation with estimated age of 30
const age = 30;
let bmr: number;
if (sex === 'male') {
bmr = (10 * weightKg) + (6.25 * heightCm) - (5 * age) + 5;
} else {
bmr = (10 * weightKg) + (6.25 * heightCm) - (5 * age) - 161;
}
return Math.round(bmr);
},
variant: 'default',
prefix: '',
suffix: ' cal',
tooltip: 'Calories burned at rest'
}, '1fr');
row.addPriceDisplay('tdee', {
label: 'Daily Calorie Needs (TDEE)',
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
const sex = infoSection.dropdown('sex')?.value() || 'male';
const activity = infoSection.dropdown('activityLevel')?.value() || 'moderate';
let heightCm: number;
let weightKg: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const weightLbs = measurementsSection.decimal('weightLbs')?.value() || 160;
heightCm = ((feet * 12) + inches) * 2.54;
weightKg = weightLbs * 0.453592;
} else {
heightCm = measurementsSection.integer('heightCm')?.value() || 175;
weightKg = measurementsSection.decimal('weightKg')?.value() || 72;
}
const age = 30;
let bmr: number;
if (sex === 'male') {
bmr = (10 * weightKg) + (6.25 * heightCm) - (5 * age) + 5;
} else {
bmr = (10 * weightKg) + (6.25 * heightCm) - (5 * age) - 161;
}
const activityMultipliers: Record<string, number> = {
'sedentary': 1.2,
'light': 1.375,
'moderate': 1.55,
'active': 1.725,
'very-active': 1.9
};
return Math.round(bmr * (activityMultipliers[activity] || 1.55));
},
variant: 'success',
prefix: '',
suffix: ' cal',
tooltip: 'Total Daily Energy Expenditure'
}, '1fr');
});
// Summary Section
const summarySection = form.addSubform('summary', {
title: '📋 Summary',
isCollapsible: false,
sticky: 'bottom'
});
summarySection.addRow(row => {
row.addTextPanel('recommendation', {
computedValue: () => {
const units = systemSection.radioButton('units')?.value() || 'imperial';
let heightM: number;
let weightKg: number;
if (units === 'imperial') {
const feet = measurementsSection.integer('heightFeet')?.value() || 5;
const inches = measurementsSection.integer('heightInches')?.value() || 9;
const weightLbs = measurementsSection.decimal('weightLbs')?.value() || 160;
const totalInches = (feet * 12) + inches;
heightM = totalInches * 0.0254;
weightKg = weightLbs * 0.453592;
} else {
heightM = (measurementsSection.integer('heightCm')?.value() || 175) / 100;
weightKg = measurementsSection.decimal('weightKg')?.value() || 72;
}
const bmi = weightKg / (heightM * heightM);
if (bmi < 18.5) {
return 'Consider consulting a healthcare provider about healthy weight gain strategies.';
} else if (bmi < 25) {
return 'Great! Maintain your healthy weight with balanced nutrition and regular exercise.';
} else if (bmi < 30) {
return 'Consider lifestyle changes including diet and exercise to reach a healthier weight.';
} else {
return 'We recommend consulting a healthcare provider for personalized weight management advice.';
}
},
customStyles: { 'font-size': '0.95rem', 'color': '#475569', 'text-align': 'center', 'font-weight': '500' }
});
});
summarySection.addRow(row => {
row.addTextPanel('disclaimer', {
computedValue: () => 'BMI is a general indicator and may not apply to athletes, elderly, or pregnant women. Consult a healthcare professional for personalized advice.',
customStyles: { 'font-size': '0.8rem', 'color': '#64748b', 'text-align': 'center' }
});
});
form.configureSubmitButton({
label: 'Save Results'
});
}