import { ProgramDataProps } from '@/pages/dashboard/create-program';
import { TextField, Typography, Grid } from '@mui/material';
import { useEffect, useState } from 'react';

type ExerciseRepsAndSetsProps = {
  id: string;
  name: string;
  setExerciseData: React.Dispatch<React.SetStateAction<ProgramDataProps>>
}

const ExerciseRepsAndSets = ({ id, name, setExerciseData }: ExerciseRepsAndSetsProps) => {
  const [reps, setReps] = useState<string>('')
  const [sets, setSets] = useState<string>('')
  const [rest, setRest] = useState<string>('')

  useEffect(() => {
    setExerciseData(prevState => {
      const existingExerciseIndex = prevState.exercises.findIndex(exercise => exercise.id === id);

      if (existingExerciseIndex !== -1) {
        // Update the existing exercise object
        const updatedExercises = [...prevState.exercises];
        updatedExercises[existingExerciseIndex] = { id, reps, sets, rest };
        return { ...prevState, exercises: updatedExercises };
      } else {
        // Add a new exercise object
        return { ...prevState, exercises: [...prevState.exercises, { id, reps, sets, rest }] };
      }
    });
  }, [reps, sets, rest]);

  return (
    <>
      <Typography>{id.slice(0, 5) + '...'}</Typography>
      <Typography variant='h3'>{name}</Typography>
      <Grid container spacing={1}>
        <Grid item xs={12} md={12 / 3}>
          <TextField
            type='string'
            label={'Reps'}
            variant={'outlined'}
            onChange={(event) => setReps(event.target.value)}
          />
        </Grid>
        <Grid item xs={12} md={12 / 3}>
          <TextField
            type='string'
            label={'Sets'}
            variant={'outlined'}
            onChange={(event) => setSets(event.target.value)}
          />
        </Grid>
        <Grid item xs={12} md={12 / 3}>
          <TextField
            type='string'
            label={'Rest'}
            variant={'outlined'}
            onChange={(event) => setRest(event.target.value)}
          />
        </Grid>
      </Grid>
    </>
  )
}

export default ExerciseRepsAndSets