/* global APP_HOSTNAME */
import React from 'react'
import PropTypes from 'prop-types'
import {isESHost} from 'common-fe/utils/browser'
import BEMModule from 'utils/bem'
import CopyValue from 'components/copy-value'
import Modal from 'react-uikit/modal'
import routes from 'global/constants/routes'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CourseJoinLink = ({courseId, name, isShowing, showToast, onDismiss}) => {
    const classes = bem.classNames('c-course-join-link-modal')
    const layoutClasses = bem.classNames('c-course-join-link-modal__layout')
    const baseUrl = isESHost() ? APP_HOSTNAME : window.location.host
    const courseJoinUrl = `${baseUrl}${routes.JOIN}${routes.COURSE}/${courseId}`

    return (
        <Modal
            className={classes}
            isShowing={isShowing}
            showDismissButton
            size="small"
            type="default"
            onDismiss={onDismiss}
        >
            <Modal.HeaderBar title="Invite to class" />
            <div className={layoutClasses}>
                <p>
                    Share this registration link to allow participants to join{' '}
                    <span>{name}</span>. Participants will be able to use an
                    existing EquitySim account or create a new one.
                </p>
                <CopyValue value={courseJoinUrl} onCopy={showToast} />
            </div>
        </Modal>
    )
}

CourseJoinLink.propTypes = {
    courseId: PropTypes.string.isRequired,
    isShowing: PropTypes.bool,
    name: PropTypes.string,
    showToast: PropTypes.func,
    onDismiss: PropTypes.func,
}

export default CourseJoinLink