import React from 'react'
import PropTypes from 'prop-types'
import ConfirmationTemplate from 'react-uikit/alert/templates/confirmation'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const PortfolioDeleteConfirm = ({
    courseSectionId,
    portfolioId,
    isShowing,
    deletePortfolio,
    onDismiss,
}) => {
    const noteClasses = bem.classNames('c-portfolio-delete-confirm__note')
    const onConfirm = () => {
        onDismiss()
        deletePortfolio({portfolioId})
    }

    const message = courseSectionId ? (
        <React.Fragment>
            <p>
                If you proceed, your portfolio will be deleted permanently and
                your data on this portfolio will be lost.
                <br />
                You are currently part of a challenge or classroom and will be
                removed from participation.
            </p>
            <p className={noteClasses}>
                Note: It is more important to make mistakes and showcase your
                learnings than it is to have a &quot;perfect record.&quot;
            </p>
        </React.Fragment>
    ) : (
        'If you proceed, your portfolio will be deleted permanently and your data on this portfolio will be lost.'
    )
    return (
        <ConfirmationTemplate
            body={message}
            cancelText="Cancel"
            confirmText="Delete"
            dismissOnConfirm={false}
            header="Are you sure?"
            isShowing={isShowing}
            variant="negative"
            onConfirm={onConfirm}
            onDismiss={onDismiss}
        />
    )
}

PortfolioDeleteConfirm.propTypes = {
    courseSectionId: PropTypes.string,
    deletePortfolio: PropTypes.func,
    isShowing: PropTypes.bool,
    portfolioId: PropTypes.string,
    showAccountDeactivation: PropTypes.func,
    onDismiss: PropTypes.func,
}

export default PortfolioDeleteConfirm