import React, {useEffect, useState, useCallback} from 'react'
import PropTypes from 'prop-types'
import AsidePanel from 'react-uikit/aside-panel'
import BEMModule from 'utils/bem'
import FormSection from './partials/form-section'
import modalTypes from 'containers/modal-manager/modal-types'
import PageNotFound from 'containers/pages/not-found'
import styles from './styles.scss'
import userRoles from 'common-fe/constants/user-roles'
// NOTE: In order to support old class terminology this, we implement a redirect
// Phase out and remove (1)
import {useLocation, useParams, useHistory} from 'react-router-dom'
import routes from 'global/constants/routes'
// ---

const bem = new BEMModule(styles)

const JoinPageBase = ({
    getData,
    id,
    login,
    logout,
    onJoin,
    permittedRoles,
    portfolios,
    register,
    registeringUserRole,
    renderContent: ContentSection,
    setPortfolio,
    showModal,
    user,
}) => {
    const [data, setData] = useState(null)
    const [isResolved, setResolved] = useState(false)

    // NOTE: Phase out and remove (2)
    const {pathname} = useLocation()
    const {courseId} = useParams()
    const history = useHistory()
    // ---

    useEffect(() => {
        getData?.()
            .then((data) => setData(data))
            .catch(() => setData(null))
            .then(() => setResolved(true))
    }, [id])

    // If user has a portfolio for challenge set it as current portfolio
    useEffect(() => {
        const portfolioId = Object.keys(portfolios).find(
            (courseId) => portfolios[courseId].courseSectionId === id
        )

        if (portfolioId) {
            setPortfolio?.({portfolioId})
        }
    })

    // NOTE: Phase out and remove (3)
    useEffect(() => {
        if (pathname.startsWith('/join/class')) {
            history.push(`${routes.JOIN_COURSE}/${courseId}`)
        }
    }, [])
    // ---

    const forgotPassword = useCallback(
        () => showModal({type: modalTypes.MODAL_PASSWORD_RESET}),
        []
    )
    const termsOfService = useCallback(
        () => showModal({type: modalTypes.MODAL_TERMS_OF_SERVICE}),
        []
    )
    const registerWithDeeplink = useCallback(
        (payload) =>
            register?.({...payload, continueUrl: window.location.href}),
        []
    )

    if (!isResolved) {
        return null
    }

    if (!data) {
        return <PageNotFound />
    }

    const classes = bem.classNames('c-join-page')
    const asideClasses = bem.classNames('c-join-page__aside')
    const contentClasses = bem.classNames('c-join-page__content')

    return (
        <div className={classes}>
            <ContentSection className={contentClasses} data={data} id={id} />

            <AsidePanel className={asideClasses}>
                <FormSection
                    data={data}
                    onJoin={onJoin}
                    onLogin={login}
                    onLogout={logout}
                    onForgotPassword={forgotPassword}
                    onTermsOfService={termsOfService}
                    onSignup={registerWithDeeplink}
                    permittedRoles={permittedRoles}
                    registeringUserRole={registeringUserRole}
                    user={{...user, portfolios}}
                />
            </AsidePanel>
        </div>
    )
}

JoinPageBase.pageTitle = 'Join'

JoinPageBase.propTypes = {
    getData: PropTypes.func,
    id: PropTypes.string,
    login: PropTypes.func,
    logout: PropTypes.func,
    permittedRoles: PropTypes.arrayOf(PropTypes.string),
    portfolios: PropTypes.object,
    register: PropTypes.func,
    registeringUserRole: PropTypes.oneOf(Object.values(userRoles)),
    renderContent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    setPortfolio: PropTypes.func,
    showModal: PropTypes.func,
    user: PropTypes.object,
    onJoin: PropTypes.func,
}

export default JoinPageBase