import React, {Suspense, useMemo} from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import Avatar from 'react-uikit/avatar'
import BEMModule from 'utils/bem'
import templates from './templates'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CourseRecentActivityItem = ({activity, className, user}) => {
    const {createdAt, type, parameters} = activity

    const {avatarUrl, firstName, lastName} = user

    const Activity = templates[type]

    if (!Activity) {
        return null
    }

    const rootClassNames = bem.classNames('c-activity-item', className)
    const avatarClassNames = bem.classNames('c-activity-item__avatar')
    const date = useMemo(() => moment(createdAt).fromNow(), [createdAt])

    return (
        <div className={rootClassNames}>
            <Avatar
                avatarUrl={avatarUrl}
                className={avatarUrl ? null : avatarClassNames}
                firstName={firstName}
                lastName={lastName}
                size="xs-small"
            />
            <Suspense fallback={null}>
                <p>{date}</p>
                <div>&nbsp;</div>
                <Activity
                    firstName={firstName}
                    lastName={lastName}
                    {...parameters}
                />
            </Suspense>
        </div>
    )
}

CourseRecentActivityItem.propTypes = {
    activity: PropTypes.object,
    className: PropTypes.string,
    user: PropTypes.object,
}

export default CourseRecentActivityItem