import React from 'react'
import PropTypes from 'prop-types'
import PortfolioOnboardingForm from 'containers/forms/portfolio-onboarding-form'
import Modal from 'react-uikit/modal'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

const PortfolioOnboardingModal = ({
    course,
    isShowing,
    withOverlay,
    onBack,
    onDismiss,
    onNext,
}) => {
    const classNames = bem.classNames('c-portfolio-onboarding-modal')

    return (
        <Modal
            className={classNames}
            showDismissButton={false}
            isShowing={isShowing}
            tapOutsideToDismiss={false}
            withOverlay={withOverlay}
            onDismiss={onDismiss}
        >
            <PortfolioOnboardingForm
                course={course}
                onBack={onBack}
                onNext={onNext}
                onSubmit={onDismiss}
            />
        </Modal>
    )
}

PortfolioOnboardingModal.propTypes = {
    course: PropTypes.object,
    isShowing: PropTypes.bool,
    withOverlay: PropTypes.bool,
    onBack: PropTypes.func,
    onDismiss: PropTypes.func,
    onNext: PropTypes.func,
}

export default PortfolioOnboardingModal