import React, {useEffect, useState} from 'react'; import StepUpIcon from './../media/StepUpIcon'; import StepDownIcon from './../media/StepDownIcon'; import CountUpIcon from './../media/CountUpIcon'; import CountDownIcon from './../media/CountDownIcon'; // components import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Button } from '@/components/ui/button'; import { Slider } from '@/components/ui/slider'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" // database import { gkDB } from '@/models/db'; import { Session as GoalKeeperSession, Goal } from '@/models/interfaces'; type AddGoalModalProps = { setShowModal: (showModal:boolean) => void; selectedSession: GoalKeeperSession | null; addedGoals: number[]; setAddedGoals: (addedGoals:number[]) => void; goalToEdit?: Goal; isEditMode?: boolean; }; export default function AddGoalModal({setShowModal, selectedSession, addedGoals, setAddedGoals, goalToEdit, isEditMode}: AddGoalModalProps): JSX.Element { const [formState, setFormState] = useState({ title: goalToEdit?.title || '', type: (goalToEdit?.type as "stepUp" | "stepDown" | "countUp" | "countDown" | "") || '', unit: (goalToEdit?.unit as "hours" | "minutes" | "miles" | "kilometers" | "ounces" | "pounds" | "kilograms" | "calories" | "times" | "workouts" | "") || '', basePoints: goalToEdit?.basePoints ?? 5, baseValue: goalToEdit?.baseValue ?? 0, reachValue: goalToEdit?.reachValue ?? 0, countFrequency: (goalToEdit?.countFrequency as "day" | "week" | "") || '', }); const [goalTypeLabelState, setGoalTypeLabelState] = useState(goalToEdit ? (goalToEdit.type === 'countUp' ? 'Sum Up' : goalToEdit.type === 'stepUp' ? 'Count Up' : goalToEdit.type === 'countDown' ? 'Deduct Values' : goalToEdit.type === 'stepDown' ? 'Count Down' : 'Select Goal Type') : 'Select Goal Type'); const [goalTypeDescriptionState, setGoalTypeDescriptionState] = useState(goalToEdit ? (goalToEdit.type === 'countUp' ? 'Record progress by summing logged amounts' : goalToEdit.type === 'stepUp' ? 'Record progress by counting up to a target' : goalToEdit.type === 'countDown' ? 'Track usage by subtracting logged amounts' : goalToEdit.type === 'stepDown' ? 'Track progress by counting down.' : 'There are 2 types of goals to track.') : 'There are 2 types of goals to track.'); const [feedbackMsgState, setFeedbackMsgState] = useState(null); const [formInputErrorState, setFormInputErrorState] = useState([]); useEffect(() => { if (goalToEdit) { setFormState({ title: goalToEdit.title || '', type: (goalToEdit.type as "stepUp" | "stepDown" | "countUp" | "countDown" | "") || '', unit: (goalToEdit.unit as "hours" | "minutes" | "miles" | "kilometers" | "ounces" | "pounds" | "kilograms" | "calories" | "times" | "workouts" | "") || '', basePoints: goalToEdit.basePoints ?? 5, baseValue: goalToEdit.baseValue ?? 0, reachValue: goalToEdit.reachValue ?? 0, countFrequency: (goalToEdit.countFrequency as "day" | "week" | "") || '', }); } }, [goalToEdit]); const handleTypeChange = (value: "stepUp" | "stepDown" | "countUp" | "countDown" | "") => { if(formInputErrorState.includes('type')){ setFormInputErrorState(formInputErrorState.filter(error => error !== 'type')); } switch(value) { case 'stepUp': setGoalTypeLabelState('Count Up'); setGoalTypeDescriptionState('Record progress by counting up to a target'); break; case 'stepDown': setGoalTypeLabelState('Count Down'); setGoalTypeDescriptionState('Track progress by counting down.'); break; case 'countUp': setGoalTypeLabelState('Sum Up'); setGoalTypeDescriptionState('Record progress by summing logged amounts'); break; case 'countDown': setGoalTypeLabelState('Deduct Values'); setGoalTypeDescriptionState('Track usage by subtracting logged amounts'); break; } setFormState({ ...formState, type: value }); }; const handleChange = (e: React.ChangeEvent) => { if(formInputErrorState.includes(e.target.name)){ setFormInputErrorState(formInputErrorState.filter(error => error !== e.target.name)); } const { name, value } = e.target; setFormState(prevState => ({ ...prevState, [name]: value })); }; const submitGoal = async () => { if(!validateAddGoal()) { setFeedbackMsgState("Please fill all required fields."); setTimeout(()=>setFeedbackMsgState(null),3000); return; } if (isEditMode && goalToEdit && goalToEdit.id != undefined) { // Update existing goal await gkDB.goals.update(goalToEdit.id, { title: formState.title.trim(), type: formState.type as "stepUp" | "stepDown" | "countUp" | "countDown" | "", unit: formState.unit as "" | "hours" | "minutes" | "miles" | "kilometers" | "ounces" | "pounds" | "kilograms" | "calories" | "times" | "workouts", baseLabel: "Base Goal", baseValue: Number(formState.baseValue), basePoints: Number(formState.basePoints), reachLabel: "Reach Goal", reachValue: Number(formState.reachValue), countFrequency: formState.countFrequency as "day" | "week" | "" }); // Recalculate session reward values if session and goals exist if (selectedSession && selectedSession.goals) { const diffTime = selectedSession ? Math.abs(selectedSession.endDate.getTime() - selectedSession.startDate.getTime()) : 0; const sessionLengthWeeks = Math.floor(diffTime / (1000 * 60 * 60 * 24 * 7)); let baseRewardValue = 0; let reachRewardValue = 0; // Use updated values for the edited goal const updatedGoals = (selectedSession.goals as Goal[]).map((g) => { if (typeof g === 'number') return g; if (g.id === goalToEdit.id) { return { ...g, basePoints: Number(formState.basePoints), }; } return g; }); updatedGoals.forEach((g) => { if (typeof g !== 'number') { baseRewardValue += (g.basePoints * sessionLengthWeeks); reachRewardValue += (10 * sessionLengthWeeks); } }); gkDB.sessions.update(selectedSession.id as number, { baseRewardValue, reachRewardValue, }); } // Reset modal state to ensure fresh info next time setFormState({ title: '', type: '', unit: '', basePoints: 5, baseValue: 0, reachValue: 0, countFrequency: '', }); setGoalTypeLabelState('Select Goal Type'); setGoalTypeDescriptionState('There are 2 types of goals to track.'); setShowModal(false); return; } const goalId = await gkDB.goals.add({ title: formState.title.trim(), type: formState.type as "stepUp" | "stepDown" | "countUp" | "countDown" | "", unit: formState.unit as "" | "hours" | "minutes" | "miles" | "kilometers" | "ounces" | "pounds" | "kilograms" | "calories" | "times" | "workouts", baseLabel: "Base Goal", baseValue: Number(formState.baseValue), reachLabel: "Reach Goal", reachValue: Number(formState.reachValue), countFrequency: formState.countFrequency as "day" | "week" | "", basePoints: Number(formState.basePoints), }); let sessionGoals: number[] = []; if(selectedSession?.goals){ sessionGoals = (selectedSession.goals as Goal[]).map((goal: Goal) => goal.id as number); } // recalculate the baseRewardValue and reachRewardValue with newly added goal const diffTime = selectedSession ? Math.abs(selectedSession.endDate.getTime() - selectedSession.startDate.getTime()) : 0; // get total session length in weeks const sessionLengthWeeks = Math.floor(diffTime / (1000 * 60 * 60 * 24 * 7)); // calculate the baseRewardValue and reachRewardValue based on the number of weeks let baseRewardValue = formState.basePoints; let reachRewardValue = 10; (selectedSession?.goals as Goal[] | undefined)?.forEach((value: Goal) => { baseRewardValue += (value.basePoints * sessionLengthWeeks); reachRewardValue += (10 * sessionLengthWeeks); }); gkDB.sessions.update(selectedSession?.id as number, { goals: [...(sessionGoals || []), goalId], baseRewardValue: baseRewardValue, reachRewardValue: reachRewardValue }); setAddedGoals([...addedGoals, goalId as number]); setShowModal(false); }; const validateAddGoal = () => { const errors:string[] = []; Object.keys(formState).forEach((key)=>{ if(!formState[key as keyof typeof formState]){ errors.push(key); } }); setFormInputErrorState(errors); if(errors.length > 0){ return false; } else { return true; } }; return ( ); };

Seth P. Kendall