/* global APP_HOSTNAME */
import React from 'react'
import PropTypes from 'prop-types'
import {isESHost} from 'common-fe/utils/browser'
import routes from 'global/constants/routes'
import BADGES from 'global/constants/badges'
import BadgeTag from 'components/badge'
import BEMModule from 'utils/bem'
import List from './partials/list'
import styles from './styles.scss'
import Icon from 'react-uikit/icon'

const bem = new BEMModule(styles)

// NOTE: The list of badges should be provided from the BE when the requirements
//       are solidified.

const CourseBadges = ({
    className,
    courseId,
    portfolioId,
    isOwner,
    isComplete,
}) => {
    const badgesDisplay = Object.values(BADGES).map((badge) => badge.label)
    const baseUrl = isESHost()
        ? `https://${APP_HOSTNAME}`
        : window.location.host
    const certificateUrl = `${baseUrl}${routes.CERTIFICATES}/${courseId}/${portfolioId}`

    const rootClassNames = bem.classNames('c-course-badges', className)
    const headerClassNames = bem.classNames('c-course-badges__header')
    const participantClassNames = bem.classNames('c-course-badges__participant')
    const ownerClassNames = bem.classNames('c-course-badges__owner')
    const linkClassNames = bem.classNames('c-course-badges__link')
    const iconClassNames = bem.classNames('c-course-badges__icon')

    return (
        <div className={rootClassNames}>
            <div className={headerClassNames}>
                <h3>Certificate</h3>
                {!isOwner && (
                    <a
                        href={certificateUrl}
                        target="_blank"
                        rel="noreferrer noopener"
                        className={linkClassNames}
                    >
                        {isComplete ? 'View' : 'Preview'}{' '}
                        <Icon name="link" className={iconClassNames} />
                    </a>
                )}
            </div>
            {isOwner ? (
                <p className={ownerClassNames}>
                    In the end of this class, participants earn a certificate of
                    completion and badges for their performance. Currently
                    available badges are: <List list={badgesDisplay} tag="em" />
                    .
                </p>
            ) : (
                <h4 className={participantClassNames}>
                    You can earn{' '}
                    {Object.values(BADGES).map((badge) => (
                        <BadgeTag key={badge.value} badge={badge} />
                    ))}{' '}
                    badges for this challenge.
                </h4>
            )}
        </div>
    )
}

CourseBadges.propTypes = {
    className: PropTypes.string,
    courseId: PropTypes.string,
    isComplete: PropTypes.bool,
    isOwner: PropTypes.bool,
    portfolioId: PropTypes.string,
    showModal: PropTypes.func,
}

export default CourseBadges