import React from 'react'
import BEMModule from 'utils/bem'
import ActivityItem from './partials/item'
import NoActivity from './partials/no-activity'
import Icon from 'react-uikit/icon'
import PropTypes from 'prop-types'
import styles from './styles.scss'
import {DEFAULT_USER} from 'global/constants/data-models'

const bem = new BEMModule(styles)

const CourseRecentActivity = ({
    activities,
    className,
    currentPage,
    nextPage,
    pages,
    prevPage,
    users,
}) => {
    const rootClassNames = bem.classNames('c-course-recent-activity', className)
    const headerClassNames = bem.classNames('c-course-recent-activity__header')
    const iconClassNames = bem.classNames('c-course-recent-activity__icon')
    const listClassNames = bem.classNames('c-course-recent-activity__list')
    const footerClassNames = bem.classNames('c-course-recent-activity__footer')
    const prevClassNames = bem.classNames(
        'c-course-recent-activity__footer-link',
        {
            disabled: currentPage < 2,
        }
    )
    const nextClassNames = bem.classNames(
        'c-course-recent-activity__footer-link',
        {
            disabled: currentPage >= pages,
        }
    )

    const hasActivity = activities?.length > 0

    return (
        <div className={rootClassNames}>
            <header className={headerClassNames}>
                <Icon className={iconClassNames} name="activity" />
                <span>Recent activity</span>
            </header>

            <div className={listClassNames}>
                {hasActivity ? (
                    activities.map((activity) => (
                        <ActivityItem
                            activity={activity}
                            key={activity.id}
                            user={users[activity.userId] || DEFAULT_USER}
                        />
                    ))
                ) : (
                    <NoActivity />
                )}
            </div>

            {hasActivity && (
                <footer className={footerClassNames}>
                    <button className={prevClassNames} onClick={prevPage}>
                        Prev
                    </button>
                    <button className={nextClassNames} onClick={nextPage}>
                        Next
                    </button>
                </footer>
            )}
        </div>
    )
}

CourseRecentActivity.propTypes = {
    activities: PropTypes.array,
    className: PropTypes.string,
    currentPage: PropTypes.number,
    nextPage: PropTypes.func,
    pages: PropTypes.number,
    prevPage: PropTypes.func,
    users: PropTypes.object,
}

export default CourseRecentActivity