import React, {useCallback} from 'react'
import PropTypes from 'prop-types'
import {history} from 'router/history'
import JoinPageTemplate from '../../base'
import routes from 'global/constants/routes'
import userRoles from 'common-fe/constants/user-roles'
import ContentSection from '../../partials/content-section'
import CompetitionContentSection from '../../partials/competition-content-section'
import {COMPETITION_IDS} from '../../partials/competition-content-section/content'

const JoinCoursePage = ({courseId, getCourse, user, portfolios}) => {
    const getData = useCallback(() => getCourse({courseId}), [courseId])
    const onJoin = useCallback(
        () =>
            courseId &&
            history.push(
                `${routes.JOIN}${routes.COURSE}/${courseId}${routes.ONBOARD}`
            ),
        [courseId]
    )

    const Content = COMPETITION_IDS.includes?.(courseId)
        ? CompetitionContentSection
        : ContentSection

    return (
        <JoinPageTemplate
            getData={getData}
            id={courseId}
            permittedRoles={[userRoles.FINANCIAL_SIM_USER]}
            registeringUserRole={userRoles.FINANCIAL_SIM_USER}
            renderContent={Content}
            user={user}
            portfolios={portfolios}
            onJoin={onJoin}
        />
    )
}

JoinCoursePage.pageTitle = 'Join Challenge'

JoinCoursePage.propTypes = {
    courseId: PropTypes.string,
    getCourse: PropTypes.func,
    portfolios: PropTypes.object,
    user: PropTypes.object,
}

export default JoinCoursePage