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

import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts'

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

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

export default MarkFormField;