import { TextInput } from '../../form'
import { TExercise } from '../types'
import ExerciseSelector from './ExerciseSelector'

interface IExerciseInputs {
  onChange: GenericEventHandler
  value?: TExercise
  name: string
}

const ExerciseInputs = ({ onChange, value, name }: IExerciseInputs) => {
  if (!value) return null
  return (
    <>
      <p>Exercise: {value?.id}</p>
      <ExerciseSelector name={name} value={value} label='Existing exercise' onChange={onChange} />
      <TextInput name={`${name}.name`} label='Name' value={value.name} onChange={onChange} />
      <TextInput
        name={`${name}.description`}
        label='Description'
        value={value.description}
        onChange={onChange}
      />
    </>
  )
}

export default ExerciseInputs