import React from 'react'
import Form from 'react-uikit/form'
import TextInput from 'react-uikit/input-text'
import inputNames from 'common-fe/constants/input-names'
import content from '../../content'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const StudentId = () => {
    const id = 'student-id'
    const inputName = inputNames.STUDENT_ID
    const labelClasses = bem.classNames(
        'c-portfolio-onboarding-form__student-id-label'
    )
    const inputClasses = bem.classNames(
        'c-portfolio-onboarding-form__student-id-input'
    )
    const contentClasses = bem.classNames(
        'c-portfolio-onboarding-form__student-id-content'
    )

    return (
        <React.Fragment>
            <label className={labelClasses} htmlFor={id}>
                Student Number
            </label>

            <Form.Field
                autoFocus
                className={inputClasses}
                id={id}
                name={inputName}
                render={TextInput}
                required
            />

            <p className={contentClasses}>{content[inputName]}</p>
        </React.Fragment>
    )
}

export default StudentId