import React from 'react'
import PropTypes from 'prop-types'
import EmailSettingsForm from 'containers/forms/email-settings'
import AuthorizeRequestTemplate from 'containers/alerts/templates/authorize-request'
import alertTypes from 'containers/alert-manager/alert-types'
import FormError from 'common-fe/utils/form-error'

const AuthorizeEmailUpdateAlert = ({
    email,
    errorForm,
    header,
    isShowing,
    showAlert,
    updateEmail,
    userId,
    onDismiss,
}) => {
    const authorizeAndUpdateEmail = ({password}) =>
        updateEmail({email, password, userId})
            .then(() =>
                showAlert({type: alertTypes.EMAIL_UPDATE_SUCCESS, email})
            )
            .catch((err) => {
                if (
                    !err.inlineErrors ||
                    !err.inlineErrors.length ||
                    !errorForm
                ) {
                    return
                }

                const error = new FormError(
                    Object.keys(EmailSettingsForm.defaultState.data),
                    err.inlineErrors
                )

                errorForm({name: EmailSettingsForm.formName, error})
                onDismiss()
            })

    return (
        <AuthorizeRequestTemplate
            header={header}
            isShowing={isShowing}
            submitText="Submit"
            onDismiss={onDismiss}
            onSubmit={authorizeAndUpdateEmail}
        />
    )
}

AuthorizeEmailUpdateAlert.propTypes = {
    email: PropTypes.string.isRequired,
    userId: PropTypes.string.isRequired,
    errorForm: PropTypes.func,
    header: PropTypes.string,
    isShowing: PropTypes.bool,
    showAlert: PropTypes.func,
    updateEmail: PropTypes.func,
    onDismiss: PropTypes.func,
}

export default AuthorizeEmailUpdateAlert