import React from 'react'
import PropTypes from 'prop-types'
import ConfirmationTemplate from 'react-uikit/alert/templates/confirmation'

const CourseListEditConfirmation = ({
    removeUser,
    isShowing,
    courseId,
    user,
    onDismiss,
}) => {
    const onConfirm = () =>
        removeUser && removeUser({courseId, userId: user.id})
    const body = (
        <React.Fragment>
            Remove this student from your class?
            <br />
            <span
                style={{fontWeight: 600}}
            >{`${user.lastName}, ${user.firstName}`}</span>
        </React.Fragment>
    )

    return (
        <ConfirmationTemplate
            body={body}
            cancelText="No"
            confirmText="Remove"
            header="Are you sure?"
            isShowing={isShowing}
            variant="negative"
            onConfirm={onConfirm}
            onDismiss={onDismiss}
        />
    )
}

CourseListEditConfirmation.propTypes = {
    courseId: PropTypes.string.isRequired,
    user: PropTypes.shape({
        firstName: PropTypes.string.isRequired,
        lastName: PropTypes.string.isRequired,
        id: PropTypes.string.isRequired,
    }).isRequired,
    isShowing: PropTypes.bool,
    removeUser: PropTypes.func,
    onDismiss: PropTypes.func,
}

export default CourseListEditConfirmation