// TODO
//- use "petState"
//- normalize names

// Buttons
const notificationButton = document.querySelector(
	".notification-center > button"
);
const curtainToggler = document.getElementById("curtain-button");
const loveButton = document.getElementById("love-button");
// Other elements
const notifications = document.querySelector(".notifications");
const petPen = document.querySelector(".pet-pen");
const petImage = document.querySelector(".pet-image");
const curtain = document.querySelector(".curtain");
const petOverlay = document.querySelector(".overlay");
// Images
const firstStageImage =
	"https://assets.codepen.io/2345403/pixil-little-guy.png";
const firstStageAngryImage =
	"https://assets.codepen.io/2345403/pixii-little-mad.png";

// Messages
//🥚 🐣 🐥 🐤 🐓 // 💢 🤬 😡
const hatchEventMessage = "🐣 The Egg Hatched!";
const firstGrowthSpurtMessage = "🐥The little guy got bigger!";
const checkBackMessage = "✨ Check back later!";
const stopMessage = "💢 You made him mad!";
const brokenLightMessage = "🌑 Good job, you broke the light";

// Pet States
// const PetStage = Object.freeze( {
// 	EGG: 'egg',
// 	HATCHING: 'hatching',
// 	BABY: 'baby'
// })
// const PetMood = Object.freeze({
// 	NEUTRAL: n,
// 	MAD: m
// });
// const petState = {
// 	mood: PetMood.NEUTRAL,
// 	stage: PetStage.EGG
// };

//utility values
let clickCount = 0; // Replace with loveLevel
let annoyanceLevel = 0;
let lightClickCount = 0;
let hatching = false;
let isTurningAngry = false;
let isLightBroken = false;

// Utility for delaying events
async function getPromise(delay) {
	return await new Promise((resolve) => setTimeout(resolve, delay));
}

// Unsorted Functions
function onNotifcationClick() {
	notificationButton.classList.remove("glow");
	if (notificationButton.getAttribute("aria-expanded") === "true") {
		notificationButton.setAttribute("aria-expanded", "false");
	} else {
		notificationButton.setAttribute("aria-expanded", "true");
	}
	notifications.classList.toggle("hidden");
}

function addNotification(message) {
	if (notifications.firstElementChild.id === "no-notifications") {
		notifications.removeChild(notifications.firstElementChild);
	}

	const newNotification = document.createElement("div");
	newNotification.classList.add("notification");
	const details = document.createElement("p");
	details.innerText = message;
	newNotification.append(details);
	notifications.appendChild(newNotification);

	notificationButton.classList.add("glow");
}

// TODO - Factor out durations
async function changeImage(url) {
	petImage.classList.add("changing");
	await getPromise(3000);
	petImage.src = url;
	await getPromise(3000);
	petImage.classList.remove("changing");
	return getPromise(0);
}

async function hatch() {
	if (!hatching) {
		hatching = true;
		changeImage(firstStageImage).then(() => {
			addNotification(hatchEventMessage);
		});
	}
}

async function showAngry() {
	if (!isTurningAngry) {
		isTurningAngry = true;
		changeImage(firstStageAngryImage).then(() => {
			addNotification(stopMessage);
		});
	}
}

async function notifyViewerOfMore() {
	setTimeout(() => {
		addNotification(checkBackMessage);
	}, 10000);
}

function sendLove() {
	if (clickCount < 10) {
		clickCount++;
		const newHeart = document.createElement("div");
		newHeart.classList.add("heart");
		newHeart.innerText = "💖";
		petPen.append(newHeart);
		setTimeout(() => {
			newHeart.remove();
		}, 2000);
	} else if (!hatching) {
		hatch();
	}
}

function toggleCurtain() {
	if (isLightBroken) {
		// Broken Light
		return;
	} else if (annoyanceLevel === 10) {
		// Gets angry
		showAngry();
		annoyanceLevel = 70;
	} else if (isTurningAngry && annoyanceLevel >= 100) {
		// Break light
		isLightBroken = true;
		curtain.classList.remove("hidden");
		addNotification(brokenLightMessage);
		notifyViewerOfMore();
		return;
	}
	if (hatching) {
		// If hatched - Increase Annoyance
		annoyanceLevel++;
	}
	curtain.classList.toggle("hidden");
}

// Listeners
notificationButton.addEventListener("click", () => {
	onNotifcationClick();
});
curtainToggler.addEventListener("click", () => toggleCurtain());
loveButton.addEventListener("click", () => sendLove());