document.addEventListener('DOMContentLoaded', () => {
    const formEl = document.getElementById("form")
    const emailEl = document.getElementById("email")
    const passwordEl = document.getElementById("email")
    const progressEl = document.getElementById("progress")

    formEl.addEventListener("submit", async event => {
        event.preventDefault()
        clearProgress()
        const email = emailEl.value
        const password = passwordEl.value
        try {
            const userCredential = await firebase.auth().createUserWithEmailAndPassword(email, password)
            console.log(userCredential)
            const uid = userCredential.user.uid
            showProgressMessage(`User account ${uid} created`)

            // Wait until document is created by Cloud Functions code
            const userDocRef = firebase.firestore().collection('users').doc(uid)
            const unsubscribe = userDocRef.onSnapshot({
                next: snapshot => {
                    showProgressMessage('User document created')
                    unsubscribe()
                },
                error: error => {
                    console.log(error)
                    showProgressMessage(error.message)
                    unsubscribe()
                }
            })
        }
        catch (error) {
            console.log(error)
            showProgressMessage(error.message)
        }
    })

    function clearProgress() {
        progressEl.innerText = ''
    }

    function showProgressMessage(message) {
        progressEl.innerText += message + "\n"
    }

})