import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import Avatar from 'react-uikit/avatar'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CourseHeadline = ({course, className}) => {
    const {
        name: courseName,
        startDate,
        endDate,
        isLoading,
        professor = {},
        school = {},
    } = course

    const {firstName, lastName, avatarUrl} = professor

    const dateFormat = 'MMMM Do YYYY'
    const startDateDisplay =
        isLoading || !startDate ? '—' : moment(startDate).format(dateFormat)
    const endDateDisplay =
        isLoading || !endDate ? '—' : moment(endDate).format(dateFormat)

    const rootClassNames = bem.classNames(
        'c-course-headline',
        {loading: isLoading},
        className
    )
    const titleClassNames = bem.classNames('c-course-headline__title')
    const durationClasses = bem.classNames('c-course-headline__duration')
    const ownerClasses = bem.classNames('c-course-headline__owner')
    const ownerNameClasses = bem.classNames('c-course-headline__owner-name')
    const institutionClasses = bem.classNames('c-course-headline__institution')
    const avatarClasses = bem.classNames('c-course-headline__avatar')

    return (
        <div className={rootClassNames}>
            <h1 className={titleClassNames}>{courseName}</h1>
            <p className={durationClasses}>
                {startDateDisplay}
                <span>&emsp;•&emsp;</span>
                {endDateDisplay}
                &emsp;
            </p>
            <div className={ownerClasses}>
                <Avatar
                    avatarUrl={avatarUrl}
                    className={avatarClasses}
                    firstName={firstName}
                    lastName={lastName}
                    size="xs-small"
                />
                <span className={ownerNameClasses}>
                    {firstName || 'organizer'} {lastName}
                </span>
                <span className={institutionClasses}>
                    {' '}
                    — {school?.name || 'no institution'}
                </span>
            </div>
        </div>
    )
}

CourseHeadline.propTypes = {
    className: PropTypes.string,
    course: PropTypes.object,
}

export default CourseHeadline