import { TextField } from '@mui/material'
import type { Person } from './api.ts'
import { personProblems } from './person.ts'

/** The first name, last name and e-mail fields; with emailOnly, of a Manager-only account, only the e-mail field, optional. */
export default function PersonFields(props: { person: Person; onChange: (person: Person) => void; autoFocus?: boolean; emailOnly?: boolean }) {
  const problems = personProblems(props.person)
  const field = (key: keyof Person, label: string, type = 'text', help = '') => (
    <TextField
      label={label}
      type={type}
      value={props.person[key]}
      autoFocus={props.autoFocus && key === (props.emailOnly ? 'email' : 'first_name')}
      autoComplete="off"
      error={problems[key] !== ''}
      helperText={problems[key] || help}
      onChange={(event) => props.onChange({ ...props.person, [key]: event.target.value })}
    />
  )
  if (props.emailOnly) {
    return field('email', 'E-mail', 'email', 'Optional, for notifications.')
  }
  return (
    <>
      {field('first_name', 'First name')}
      {field('last_name', 'Last name')}
      {field('email', 'E-mail', 'email')}
    </>
  )
}