/* 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 {history} from 'router/history'
import styles from './styles.scss'

const bem = new BEMModule(styles)

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

    const handleDismiss = () => {
        onDismiss()
        history.push(`${routes.COURSE}/${courseId}${routes.OVERVIEW}`)
    }

    return (
        <Modal
            className={classes}
            isShowing={isShowing}
            showDismissButton
            size="small"
            type="default"
            onDismiss={handleDismiss}
        >
            <Modal.HeaderBar title="Congratulations" />
            <div className={layoutClasses}>
                <p>
                    Your class{' '}
                    <span style={{fontWeight: 600}}>{courseName}</span> was
                    successfully created! Share this link with your students to
                    invite them to join.
                </p>
                <CopyValue value={courseJoinUrl} onCopy={showToast} />
            </div>
        </Modal>
    )
}

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

export default CourseCreationSuccess