import React from 'react'
import PropTypes from 'prop-types'
import AccountUserLoggedIn from 'react-uikit/account-user-logged-in'
import AccountForm from 'containers/forms/account-form'
import BEMModule from 'utils/bem'
import JoinButton from '../button'
import styles from './styles.scss'
import userRoles from 'common-fe/constants/user-roles'

const bem = new BEMModule(styles)

const FormSection = ({
    data,
    permittedRoles,
    registeringUserRole,
    user,
    onForgotPassword,
    onJoin,
    onLogin,
    onLogout,
    onSignup,
    onTermsOfService,
}) => {
    const {isLoggedIn, firstName, lastName, avatarUrl} = user
    const fieldsets = [
        {
            fieldsFor: 'signup',
            tabLabel: 'Sign Up',
            submitLabel: 'Hop on board',
            onSubmit: onSignup,
        },
        {
            fieldsFor: 'login',
            tabLabel: 'Login',
            submitLabel: 'Welcome back',
            onSubmit: onLogin,
        },
    ]

    const classes = bem.classNames('c-join-page__form-section', {isLoggedIn})
    const headlineClasses = bem.classNames(
        'c-join-page__form-section__headline'
    )
    const joinClasses = bem.classNames('c-join-page__form-section__join')
    const userSectionClasses = bem.classNames(
        'c-join-page__form-section__user-section'
    )

    return (
        <div className={classes}>
            <h1
                className={headlineClasses}
            >{`Register for ${data.name} with your EquitySim account`}</h1>
            {isLoggedIn ? (
                <div className={userSectionClasses}>
                    <AccountUserLoggedIn
                        dark
                        avatarUrl={avatarUrl}
                        firstName={firstName}
                        lastName={lastName}
                        onLogout={onLogout}
                    />
                    <JoinButton
                        className={joinClasses}
                        data={data}
                        onClick={onJoin}
                        permittedRoles={permittedRoles}
                        user={user}
                    />
                </div>
            ) : (
                <AccountForm
                    dark
                    fieldsets={fieldsets}
                    userRole={registeringUserRole}
                    onForgotPassword={onForgotPassword}
                    onTermsOfService={onTermsOfService}
                    // If needed to control the tabs (ex. with routes)
                    // activeTab // Number
                    // onChangeTab // Function
                />
            )}
        </div>
    )
}

FormSection.propTypes = {
    data: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired,
    permittedRoles: PropTypes.array,
    portfolios: PropTypes.object,
    registeringUserRole: PropTypes.oneOf(Object.values(userRoles)),
    onForgotPassword: PropTypes.func,
    onJoin: PropTypes.func,
    onLogin: PropTypes.func,
    onLogout: PropTypes.func,
    onSignup: PropTypes.func,
    onTermsOfService: PropTypes.func,
}

export default FormSection