import { CurrentUserMark, Mark } from '../../types/mark.ts'
import styles from './style.module.scss'
import { Box, Button, TextField } from '@mui/material'

interface MarkFormFieldProps {
  handleSubmit: (event: any) => void
  handleChange: (event: any) => void
  currentMark: CurrentUserMark
  currentMarkValue: string
}

const MarkFormField = (props: MarkFormFieldProps) => {
  const { handleSubmit, handleChange, currentMark, currentMarkValue } = props;
  const getSubmitButton = () => currentMark.isLast ? 'Complete' : 'Next';
  return (
    <div className={styles.fixedBottomForm}>
      <Box component="form" onSubmit={handleSubmit}>
        <TextField
          id="mark-value"
          label={currentMark.mark.type}
          value={currentMarkValue}
          onChange={handleChange}
        />
        <Button type="submit" variant="contained">
          {getSubmitButton()}
        </Button>
      </Box>
    </div>
  )
}

export default MarkFormField;