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

const bem = new BEMModule(styles)

const CompetitionHeadline = ({course, isComplete}) => {
    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-competition-headline')
    const titleClassNames = bem.classNames('c-competition-headline__title')
    const subtitleClassNames = bem.classNames(
        'c-competition-headline__subtitle'
    )
    const durationClassNames = bem.classNames(
        'c-competition-headline__duration'
    )
    const ownerClassNames = bem.classNames('c-competition-headline__owner')
    const avatarClassNames = bem.classNames('c-competition-headline__avatar')
    const ownerNameClassNames = bem.classNames(
        'c-competition-headline__owner-name'
    )
    const institutionClassNames = bem.classNames(
        'c-competition-headline__institution'
    )

    return (
        <div className={rootClassNames}>
            <h2 className={subtitleClassNames}>
                {isComplete
                    ? 'Certificate of Completion'
                    : 'Challenge in progress…'}
            </h2>
            <h1 className={titleClassNames}>{courseName}</h1>

            <p className={durationClassNames}>
                {startDateDisplay}
                <span>&emsp;•&emsp;</span>
                {endDateDisplay}
                &emsp;
            </p>

            <div className={ownerClassNames}>
                <Avatar
                    avatarUrl={avatarUrl}
                    className={avatarClassNames}
                    firstName={firstName}
                    lastName={lastName}
                    size="xs-small"
                />
                <span className={ownerNameClassNames}>
                    {firstName || 'organizer'} {lastName}
                </span>
                <span className={institutionClassNames}>
                    {' '}
                    — {school?.name || 'no institution'}
                </span>
            </div>
        </div>
    )
}

CompetitionHeadline.propTypes = {
    course: PropTypes.object,
    isComplete: PropTypes.bool,
}

export default CompetitionHeadline