const siteList = document.querySelector("#site-list");
const groupList = document.querySelector("#group-list");
const form = document.querySelector("#create-group-form");
const txtEmail = document.getElementById("txtEmail");
const txtPassword = document.getElementById("txtPassword");
const btnLogin = document.getElementById("btnLogin");
const btnSignUp = document.getElementById("btnSignUp");
const btnLogout = document.getElementById("btnLogout");
const userNameHTML = document.getElementById("userNameHTML");
const userIDHTML = document.getElementById("userIDHTML");
const user = firebase.auth().currentUser;

// Add login event
btnLogin.addEventListener("click", event => {
	const email = txtEmail.value;
	const pass = txtPassword.value;
	const auth = firebase.auth();
	// Sign In
	const promise = auth.signInWithEmailAndPassword(email, pass);
	promise.catch(event => console.log(event.message));
});

btnSignUp.addEventListener("click", event => {
	const email = txtEmail.value;
	const pass = txtPassword.value;
	const auth = firebase.auth();
	// Create User
	const promise = auth.createUserWithEmailAndPassword(email, pass);
	promise.catch(event => console.log(event.message));
});

btnLogout.addEventListener("click", event => {
	firebase.auth().signOut();
});

firebase.auth().onAuthStateChanged(firebaseUser => {
	if (firebaseUser) {
		userNameHTML.textContent = "User: " + firebaseUser.email;
		userIDHTML.textContent = "UserID: " + firebaseUser.uid;
		let userData = db.collection("users").doc(firebaseUser.uid);
		userData.get().then(function(doc) {
			if (!doc.exists) {
				userData.set({
					email: firebaseUser.email,
					adminOf: {},
					memberOf: {}
				});
			}
			renderGroupLocations(doc);
		});
	} else {
		userNameHTML.textContent = "User: Logged Out";
		userIDHTML.textContent = "User: Logged Out";
		document.getElementById("memberOf-list").innerHTML = "";
	}
});

// create element and render cafe

const renderGroupLocations = doc => {
	let li = document.createElement("li");
	let group = document.createElement("span");
	let groupID = document.createElement("span");
	let cross = document.createElement("div");

	li.setAttribute("data-id", doc.id);
	group.textContent = doc.data().groupName;
	groupID.textContent = doc.data().groupID;
	cross.textContent = "x";

	li.appendChild(group);
	li.appendChild(groupID);
	li.appendChild(cross);
	memberOfList.appendChild(li);

	// deleting data

	cross.addEventListener("click", event => {
		event.stopPropagation();
		let id = event.target.parentElement.getAttribute("data-id"); // getting document ID see line 11
		db.collection("sites")
			.doc("WLnErGtp51DlDiHjOLF8")
			.collection("groups")
			.doc(id)
			.delete();
	});
};


// saving data
form.addEventListener("submit", event => {
	event.preventDefault();
	db.collection("sites")
		.doc("WLnErGtp51DlDiHjOLF8")
		.collection("groups")
		.add({
		groupID: form.groupID.value,
		groupName: form.groupName.value
	});
	form.groupID.value = "";
	form.groupName.value = "";
});

// real-time-listener
db.collection("sites").onSnapshot(snapshot => {
	let changes = snapshot.docChanges();
	changes.forEach(change => {
		if (change.type === "added") {
			renderMemberLocations(change.doc);
		} else if (change.type === "removed") {
			let li = renderMemberLocations.querySelector(
				"[data-id=" + change.doc.id + "]"
			);
			cafeList.removeChild(li);
		}
	});
});