# add client SDK to project
pnpm i firebase # or use `firebase-lite` which does'nt have real-time updates coz it is REST wrapper

# add firebase-tools then login
pnpm install -g firebase-tools
firebase login

const firebaseConfig = {
    apiKey: "AIzaSyBEDYLiNmyEg41MQ6aSKZl-jKgnHeU4xEk",
    authDomain: "fir-9-rush.firebaseapp.com",
    projectId: "fir-9-rush",
    storageBucket: "fir-9-rush.appspot.com",
    messagingSenderId: "322306232885",
    appId: "1:322306232885:web:04f99272f4dfa124ec177c"
};

const expensesCol = collection(firestore, 'expenses')
const expensesQuery = query(
	expensesCol,
	// >, >=, <, <=, ==, !=
	where('release', '>', new Date('6/10/2023')),
	// in, not-in
	where('city', 'in', ['sanaa', 'aden']),
	// we can nest objects to 20 nest
	where('product.cost', '>=', 200),
	where('product.cost', '<=', 100),
	// category is an array: [...]
	where('category', '==', ['food', 'candy']),
	// if category contain 
	where('category', 'array-contains', 'food'),
	// if category contain any of
	where('category', 'array-contains-any', ['food', 'candy']),
	// for range functions, all of them depend on what orderBy
	orderBy('date', 'desc')
	// if use both it will get range of values
	startAt(new Date('1/1/2022'))
	endAt(new Date('/1/2022'))
	limit(100)
)

getDocs(booksRef)
    .then((snapshot) => {
		// console.log(snapshot.docs)
		let books = []
		snapshot.docs.forEach((doc) => {
			books.push({ ...doc.data(), id: doc.id })
		})
		console.log(books)
	})
	.catch(err => {
		console.log(err.message)
	})

getDoc(bookRef)
	.then( doc => {
		console.log(doc.data(), doc.id)
	})

const addBookForm = document.querySelector(".add")
addBookForm.addEventListener('submit', e => {
	e.preventDefault();

	// `booksRef` is query or collection
	addDoc(booksRef, {
		title: addBookForm.title.value,
		author: addBookForm.author.value,
		createdAt: serverTimestamp() // don't trust local dates
	})
	.then(() => {
		addBookForm.reset()
	})
	.catch((err) => {
		console.error(err.message)
	})
})

const updateBookForm = document.querySelector(".update")
updateBookForm.addEventListener('submit', e => {
	e.preventDefault()

	const docRef = doc(db, 'books', updateBookForm.id.value)
	updateDoc(docRef, {
		title: "updated title",
		pages: increment(10) // inc/dec without effort
		authors: ["updated author1", "updated author2"] // replace old authors by new array
		prints: arrayUnion("updated print1", "updated print2") // add new prints to original array
		chapters: arrayRemove("updated chapter1", "updated chapter2") // remove these chapters from original array
	})
	.then(() => {
		updateBookForm.reset()
	})
	.catch((err) => {
		console.error(err.message)
	})
})

// if id is for non-exist doc, client will generate new id
const cityRef = doc(db, 'cities', 'BJ')

setDoc(cityRef, { 
	capital: true,
	long: false,
	title: true
},
// see differences and apply delta, if doc is not exist create it
{ merge: true }
);

const deleteBookForm = document.querySelector(".delete")
deleteBookForm.addEventListener('submit', e => {
	e.preventDefault()

	const docRef = doc(db, 'books', deleteBookForm.id.value)
	deleteDoc(docRef)
	.then(() => {
		deleteBookForm.reset()
	})
	.catch((err) => {
		console.error(err.message)
	})
})

// call unsubBook() to stop observing
const unsubBook = onSnapshot(bookRef, 
	// snapshot callback re-run with every change
	(snapshot) => {
		// this is one doc
		console.log(snapshot)

		// this is doc data and id
		console.log(snapshot.data(), snapshot.id)

		// this use the metadata to detect from where doc came
		// { fromCach: true, hasPendingWrite: true }
		console.log(snapshot.metadata)
	},
	// optional error handler
	(errr) => console.error(errr.message)
)

const unsubBooks = onSnapshot(booksRef,
	(snapshot) => {
		// this is an array of docs
		console.log(snapshot.docs)

		// you can itrate throgh and map waht you need
		console.log(snapshot.docs.map(d => d.data()))
    
		// document change types
		console.log(snapshot.docChanges[0])
		// { type: 'added', doc: {}, oldIndex: -1, newIndex: 1 }

		// create object indexed by changes
		const change = snapshot.docChanges.reduce((acc, curr) => { 
			acc[curr.type] = { ...curr.doc.data(), curr.doc.id }
		}, { added: [], modified: [], removed: [] })
		// { added: [{}, {}, ...], modified: [], removed: [] }
	},
	(err) => console.error(err.message)
)

const signupForm = document.querySelector('.signup')
signupForm.addEventListener('submit', e => {
	e.preventDefault()

	const email = signupForm.email.value
	const password = signupForm.password.value

	createUserWithEmailAndPassword(auth, email, password)
		.then( cred => {
			// or maybe need to store cred.user.email
			console.log('user created: ', cred.user)
			signupForm.reset()
		})
		.catch(error => {
			console.log(error.message)
		})
})

const signinForm = document.querySelector('.signin')
signinForm.addEventListener('submit', e => {
	e.preventDefault()

	const email = signinForm.email.value
	const password = signinForm.password.value

	signInWithEmailAndPassword(auth, email, password)
        .then(cred => {
			console.log('user logged in: ', cred.user)
			signinForm.reset()
		})
		.catch(error => {
			console.log(error.message)
		})
})

// check if user is authorized
console.log(auth.currentUser)

// check if user logged in or created
const unsubAuth = onAuthStateChanged(auth, user => { // if logged out, user will be null
    console.log('user status changed', user)
})

const signoutButton = document.querySelector('.signout')
signoutButton.addEventListener('click', () => {
	signOut(auth)
		.then(() => {
			console.log('the user signed out')
			unsubBooks()
			unsubBook()
			unsubAuth()
		})
		.catch(error => {
			console.log(error.message)
		})
})

// it does'nt return result coz it redirect
linkWithRedirect(auth.currentUser, new GoogleAuthProvider())
signInWithRedirect(auth, new GoogleAuthProvider())

// receive result after redirect done (in onMount or useEffect function)
try {
    await getRedirectResult(auth)
} catche (error) {
    console.log(error)
}

const listRef = ref(storage, 'files');
listAll(listRef)
	.then((res) => {
		// All the prefixes under listRef, You may call listAll() recursively on them.
		res.prefixes.forEach((folderRef) => {
			console.log('folder: ' + folderRef.fullPath)
		});

		// All the items under listRef.
		res.items.forEach((itemRef) => {
			console.log('file: ' + itemRef.fullPath)
		});
	}).catch((error) => {
		// Uh-oh, an error occurred!
	});

// or photoRef
getDownloadURL(uploadTask.snapshot.ref) 
	.then((url) => {
		const img = document.querySelector('.file');
		img.setAttribute('src', url);
	})
	.catch((error) => {
		switch (error.code) {
			case 'storage/object-not-found':
				// File doesn't exist
				break;
			case 'storage/unauthorized':
				// User doesn't have permission to access the object
				break;
			case 'storage/canceled':
				// User canceled the upload
				break;

			case 'storage/unknown':
				// Unknown error occurred, inspect the server response
				break;
		}
	});

const deleteFileForm = document.querySelector(".deleteFile")
deleteFileForm.addEventListener('submit', e => {
	e.preventDefault()

	const fileRef = ref(storage, deleteFileForm.file.value)
	deleteObject(fileRef)
		.then(() => {
			deleteBookForm.reset()
			console.log("delete file sucessfully")
		})
		.catch((err) => {
			console.error(err.message)
		})
})

firebase init functions
# write a cloud function
firebase deploy --only functions

// functions/index.js
const functions = require('firebase-functions')
exports.helloWorld = functions.https.onRequest((req, res) => {})

// firebase config file
{
    "hosting": {
        "public": "...",
        "source": "....",
        "rewrites": [{
            "source": "**", // or spesfic path
            "function": "ssr"
        }]
    }
}