import React from 'react'
import moment from 'moment'
import PropTypes from 'prop-types'
import Form from 'react-uikit/form'
import TextInput from 'react-uikit/input-text'
import inputNames from 'common-fe/constants/input-names'
import CourseBanner from 'components/course-banner'
import content from '../../content'
import styles from './styles.scss'
import BEMModule from 'utils/bem'
import {COURSE_ID_LENGTH} from 'store/config'

const bem = new BEMModule(styles)

const getCourseErrors = ({course, errors, user}) => {
    if (errors && errors.length) {
        return errors
    }

    if (!course) {
        return []
    }

    // Course has already ended
    if (moment() > moment(course.endDate)) {
        return [{code: 'has-ended'}]
    }

    // User already registered for course
    if (user.courses && user.courses.includes(course.id)) {
        return [{code: 'has-registered'}]
    }

    return []
}

const CourseCode = ({courses, data, user}) => {
    const labelClasses = bem.classNames(
        'c-portfolio-onboarding-form__course-code-label'
    )
    const inputClasses = bem.classNames(
        'c-portfolio-onboarding-form__course-code-input'
    )
    const bannerClasses = bem.classNames(
        'c-portfolio-onboarding-form__course-code-banner'
    )
    const contentClasses = bem.classNames(
        'c-portfolio-onboarding-form__course-code-content'
    )

    const id = 'course-code'
    const inputName = inputNames.COURSE_ID
    const courseId = data[inputName].toLowerCase()
    const course = courses[courseId]
    const courseErrors =
        courseId.length === COURSE_ID_LENGTH
            ? getCourseErrors({course, errors: courses.errors, user})
            : []

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

            <Form.Field
                autoFocus
                className={inputClasses}
                id={id}
                maxLength={COURSE_ID_LENGTH}
                name={inputName}
                placeholder="x9g865sfjgls0f8s34zf9ga7f29s"
                render={TextInput}
                required
            />

            <CourseBanner
                className={bannerClasses}
                course={course}
                errors={courseErrors}
            />

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

CourseCode.propTypes = {
    courses: PropTypes.object,
    data: PropTypes.object,
    user: PropTypes.shape({
        courses: PropTypes.Array,
    }),
}

export default CourseCode