import React from 'react'
import PropTypes from 'prop-types'
import ModalForm from 'react-uikit/modal/form'
import FileUploadForm from 'containers/forms/file-upload'

const AvatarUploadModal = ({
    isShowing,
    templateProps,
    title,
    updateAvatar,
    user: {avatarUrl, id: userId},
    onDismiss,
}) => {
    const submit = ({files: avatar}) => {
        const payload = {userId, avatar}

        return updateAvatar?.(payload).then(() => onDismiss?.(payload))
    }

    return (
        <ModalForm isShowing={isShowing} onDismiss={onDismiss} title={title}>
            <FileUploadForm
                {...templateProps}
                initialFileUrl={avatarUrl}
                unregisterOnExit
                onSubmit={submit}
            />
        </ModalForm>
    )
}

AvatarUploadModal.defaultProps = {
    title: 'Upload File',
}

AvatarUploadModal.propTypes = {
    isShowing: PropTypes.bool,
    templateProps: PropTypes.object,
    title: PropTypes.string,
    updateAvatar: PropTypes.func,
    user: PropTypes.shape({
        avatarUrl: PropTypes.string,
        id: PropTypes.string,
    }),
    onDismiss: PropTypes.func,
}

export default AvatarUploadModal