/* 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 BEMModule from 'utils/bem'
import styles from './styles.scss'
import Banner from 'components/banner'
import Icon from 'react-uikit/icon'
import Flag from './partials/flag'

const bem = new BEMModule(styles)

const CourseCompletedBanner = ({course, className, portfolioId}) => {
    const {isLoading, id: courseId} = course
    const baseUrl = isESHost()
        ? `https://${APP_HOSTNAME}`
        : window.location.host
    const certificateUrl = `${baseUrl}${routes.CERTIFICATES}/${courseId}/${portfolioId}`

    const rootClassNames = bem.classNames(
        'c-course-completed-banner',
        {loading: isLoading},
        className
    )
    const flagClassNames = bem.classNames('c-course-completed-banner__flag')
    const messageClassNames = bem.classNames(
        'c-course-completed-banner__message'
    )
    const linkClassNames = bem.classNames('c-course-completed-banner__link')
    const iconClassNames = bem.classNames('c-course-completed-banner__icon')

    return (
        <a href={certificateUrl} target="_blank" rel="noreferrer noopener">
            <Banner accent className={rootClassNames}>
                <Flag className={flagClassNames} />
                <p className={messageClassNames}>Challenge completed!</p>
                <p className={linkClassNames}>
                    You have received a certificate of completion{' '}
                    <Icon name="link" className={iconClassNames} />
                </p>
            </Banner>
        </a>
    )
}

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

export default CourseCompletedBanner