// Bangle.MESSAGES = [
// 	{"t":"add","id":1720281666,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// 	"body":"5 * short message *5",
// 	"sender":"","positive":true,"negative":true,"new":true,"handled":true, "show": true},
//
// 	{"t":"add","id":1720281662,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// 	"body":"1 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****1",
// 	"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// 	{"t":"add","id":1720281663,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// 	"body":"2 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****2",
// 	"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// 	{"t":"add","id":1720281667,"src":"SMS Message","title":"Hayley Thiessen","subject":"",
// 	"body":"6 * short message *6",
// 	"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// 	{"t":"add","id":1720281664,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// 	"body":"3 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****3",
// 	"sender":"","positive":true,"negative":true,"new":true,"handled":true, "show": true},
//
// 	{"t":"add","id":1720281665,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// 	"body":"4 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****4",
// 	"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// ];


let idle = false;
let haveNewMessage = false;
let previousActive;
let active;
let buzzing;
let events = {};
let timeouts = {};
let cleanup = function() {};	// we don't want cleanup function to do anything until we actually need it

const goBack = function(timedOut) {
	console.log("previousActive = ", previousActive);
	switch (previousActive) {
		case "alarm": return showAlarm();
		case "call": return showCall();
		case "message": return showMessage();
		case "map": return showMap();
		case "music": return showMusic();
		default:
			if (!timedOut) Bangle.MESSAGES.forEach((m) => {if (!m.new) m.show = false;});
			console.log("write messages");
			console.log("Bangle.MESSAGES", Bangle.MESSAGES);
			require("messages").write(Bangle.MESSAGES);
			cleanup = _cleanup;
			Bangle.showClock();
	}
};

const setListener = function(event, callback) {
	if (!event || !callback) return;
	// console.log("setListener");
	events[event] = callback;
	Bangle.on(event, callback);
};

const _cleanup = function() {
	for (let e in events) if (e) Bangle.removeListener(e, events[e]);
	for (let t in timeouts) if (timeouts[t]) clearTimeout(timeouts[t]);
};

const clearTimeouts = function() {
	for (let t in timeouts) if (timeouts[t]) clearTimeout(timeouts[t]);
};

// placeholder functions
const showNoMessages = function() {

};

const showMusic = function() {

};

const showMap = function() {

};

const showAlarm = function() {

};

const showCall = function() {

};
	//let settings = require('Storage').readJSON("messages.settings.json", true) || {};
	//const settings = () => require("messagegui").settings();
  const fontTiny = "6x8"; // fixed size, don't use this for important things
  let fontNormal;
  // setFont() is also called after we close the settings screen
  // const setFont = function() {
  //   const fontSize = settings().fontSize;
  //   if (fontSize===0) // small
  //     fontNormal = g.getFonts().includes("6x15") ? "6x15" : "6x8:2";
  //   else if (fontSize===2) // large
  //     fontNormal = g.getFonts().includes("6x15") ? "6x15:2" : "6x8:4";
  //   else // medium
  //     fontNormal = g.getFonts().includes("12x20") ? "12x20" : "6x8:3";
  // };
  // setFont();

Bangle.loadWidgets();
require("widget_utils").hide();

events.saveMessages = function() {
	require("messages").write(Bangle.MESSAGES);
};

E.on("kill", events.saveMessages);

const newMessage = (type, msg) => {
	// console.log("new message");
	if (type === "text" && active === "message") {
		require("messages").apply(msg, Bangle.MESSAGES);
		if (idle) showText(Bangle.MESSAGES); // we are idle so show new messages right away
		else haveNewMessage = true; // otherwise set new message flag and wait until idle
	}
	// TODO deal with other types of messages
};
setListener("message", newMessage);

// Check for new messages, wait until there is no interaction for `idleTime` ms
const checkForNewMessages = function(idleTime) {
	// console.log("checkForNewMessages");
	idleTime = idleTime ?? 3000;	// how much time without interaction before we are considered idle
	// console.log("idleTime = ", idleTime);
	idle = false;
	if (timeouts.idleTimer) clearTimeout(timeouts.idleTimer);
	timeouts.idleTimer = setTimeout(() => {
		// console.log("update messages");
		if (haveNewMessage) {
			// console.log("call showText()");
			haveNewMessage = false;
			showText(Bangle.MESSAGES);
		}
		idle = true;
	}, idleTime);
};

const setBusy = function() {
	idle = false;
	if (timeouts.idleTimer) clearTimeout(timeouts.idleTimer);
	timeouts.idleTimer = undefined;
};

/**
 * @param showAll {bool} true to show all messages, false to only show new messages, default: false
 */
const showText = function(showAll) {
	Bangle.setUI();	// make sure to clear setUI from anything previous
	if (active != "message") previousActive = active;
	active = "message";
	setBusy();	// busy until everything is set up
	let switching = false;
	let MessageBox = require("messagebox").MessageBox;
	require("messagebox").setOptions({fh: 20});
	const step = 42;
	const delay = 30;
	const swipeThreshold = 20;
	let mode = "scroll"; // one of "scroll", "next", "prev" (switch to next/prev message), "swipe" (swipe to delete or archive)
	let messageNum = 0;
	// TODO we might have to append array of (m.show && !m.new) to array of m.new so that all new messages are at the beginning of list
	let messageList = showAll ? Bangle.MESSAGES : Bangle.MESSAGES.filter(m => m.new || m.show);
	if (!messageList.length) {
     // console.log("No messages")
		 return;
	}
//	Bangle.setLocked(false);		// TODO make as option
//	Bangle.setLCDPower(true);	// TODO make as option

	let msgBoxes = [];
	let i = 0;
	for (let msg of messageList) {
		msgBoxes[i] = new MessageBox(msg);
		if (i === messageNum - 1) msgBoxes[i].yOffset = MessageBox.prototype.prevOffset;
		else if (i === messageNum) {
			msgBoxes[i].yOffset = 0;
			msgBoxes[i].draw();
		}
		else if ( i === messageNum + 1) msgBoxes[i].yOffset = MessageBox.prototype.nextOffset;
		i++;
	}

	const drawFooter = function() {
		let fh = 20;	// footer height
		// left hint: swipe from left for main menu
		g.reset().setBgColor(g.theme.bg2).clearRect(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2)
			.setFont("6x15") // TODO make as option
			.setFontAlign(-1, 1) // bottom left
			.drawString(
				//"\0"+atob("CAiBAEgkEgkSJEgA"), // >>
				">>",
				Bangle.appRect.x + 1, Bangle.appRect.y2
			);
		// center message count+hints: swipe up/down for next/prev message
		const footer = `  ${messageNum + 1}/${msgBoxes.length}  `;
		const	fw = g.stringWidth(footer);
		g.setFontAlign(0, 1); // bottom center
		g.drawString(footer, Bangle.appRect.x+Bangle.appRect.w/2, Bangle.appRect.y2);
		if (messageNum < Bangle.MESSAGES.length - 1 && msgBoxes[messageNum].bottom)
			g.drawString("\0"+atob("CAiBAABBIhRJIhQI"),	Bangle.appRect.x+Bangle.appRect.w/2-fw/2 - 20, Bangle.appRect.y2); // v swipe to next
		if (messageNum > 0 && msgBoxes[messageNum].top)
			g.drawString("\0"+atob("CAiBABAoRJIoRIIA"), Bangle.appRect.x+Bangle.appRect.w/2+fw/2 + 20, Bangle.appRect.y2); // ^ swipe to prev
		// right hint: swipe from right for message actions
		g.setFontAlign(1, 1) // bottom right
			.drawString(
				//"\0"+atob("CAiBABIkSJBIJBIA"), // <<
				"<<",
				Bangle.appRect.x2 - 1, Bangle.appRect.y2
			);
	};

	const refresh = function() {
		if (messageNum >= 0 && messageNum < msgBoxes.length) {
			msgBoxes[messageNum].reset();
			if (messageNum > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
			if (messageNum < msgBoxes.length - 1)	msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
		}
	};

	const removeMessage = function() {
		const removeAndReset = () => {
			let id = msgBoxes[messageNum].msg.id;
			Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id !== id); // remove from Bangle.MESSAGES
			msgBoxes.splice(messageNum, 1);	// remove from msgBoxes
			if (!msgBoxes.length) {
				Bangle.setUI();
				return goBack();	// no more messages
			}
			if (messageNum === msgBoxes.length) messageNum--;	// we removed the last message, go to previous message
			// otherwise messageNum is automatically the index of the next message now
			refresh();
			msgBoxes[messageNum].draw();
			drawFooter();
		};
		if (messageNum < msgBoxes.length - 1) {
			require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
			g.setBgColor(g.theme.bg).clear();
			toNext(true).then(() => {
				removeAndReset();
				switching = false;
			});
		} else if (messageNum > 0) {
			require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
			g.setBgColor(g.theme.bg).clear();
			toPrev(true).then(() => {
				removeAndReset();
				switching = false;
			});
		} else {
			removeAndReset();
		}
	};

	const dismissOnPhone = function() {
		return Bangle.messageResponse(msgBoxes[messageNum].msg, false);  // false to dismiss, true to open on phone
	};

	const toNext = function(removeCurrent) {
		if (removeCurrent == undefined) removeCurrent = false;
		if (timeouts.animID){
			clearTimeout(timeouts.animID);
			timeouts.animID = undefined;
		}
		firstTouch = true;
		return new Promise((resolve, _reject) => {
			let animate = () => {
				msgBoxes[messageNum].yOffset -= step;
				msgBoxes[messageNum + 1].yOffset -= step;
				if (msgBoxes[messageNum + 1].yOffset <= 0) {
					if (!removeCurrent) {
						if (messageNum < msgBoxes.length) {
							messageNum++;
							refresh();
						}
					}
					msgBoxes[messageNum].draw();
					drawFooter();
					return resolve();
				} else {
					msgBoxes[messageNum].draw();
					msgBoxes[messageNum + 1].draw();
					drawFooter();
					timeouts.animID = setTimeout(animate, delay);
				}
			};
			animate();
		});
	};

	const toPrev = function(removeCurrent) {
		if (removeCurrent == undefined) removeCurrent = false;
		if (timeouts.animID){
			clearTimeout(timeouts.animID);
			timeouts.animID = undefined;
		}
		firstTouch = true;
		return new Promise((resolve, _reject) => {
			let animate = () => {
				msgBoxes[messageNum].yOffset += step;
				msgBoxes[messageNum - 1].yOffset += step;
				if (msgBoxes[messageNum - 1].yOffset >= 0) {
					if (!removeCurrent) {
						if (messageNum > 0) {
							messageNum--;
							refresh();
						}
					}
					msgBoxes[messageNum].draw();
					drawFooter();
					return resolve();
				} else {
					msgBoxes[messageNum].draw();
					msgBoxes[messageNum - 1].draw();
					drawFooter();
					timeouts.animID = setTimeout(animate, delay);
				}
			};
			animate();
		});
	};

	const drawLeftBackground = function() {
		g.setBgColor(1, 0.5, 0); // red
		g.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
		g.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
		g.setBgColor(g.theme.bg);
	};

	const drawRightBackground = function() {
		g.setBgColor(0, 0.5, 1); // red
		g.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
		g.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
		g.setBgColor(g.theme.bg);
	};

	const animateToLeft = function() {
		if (timeouts.animID) {
			clearTimeout(timeouts.animID);
			timeouts.animID = undefined;
		}
		const endX = Bangle.appRect.x + (Bangle.appRect.w / 2);
		const msgBox = msgBoxes[messageNum];
		return new Promise((resolve, _reject) => {
			let animate = () => {
				msgBox.xOffset -= step
				drawLeftBackground();
				if (msgBox.xOffset <= endX) {
					return resolve();
				} else {
					msgBox.draw();
					drawFooter();
					timeouts.animID = setTimeout(animate, delay);
				}
			};
			animate();
		});
	};

	const animateToRight = function() {
		if (timeouts.animID) {
			clearTimeout(timeouts.animID);
			timeouts.animID = undefined;
		}
		const endX = Bangle.appRect.x2 - (Bangle.appRect.w / 2);
		const msgBox = msgBoxes[messageNum];
		return new Promise((resolve, _reject) => {
			let animate = () => {
				msgBox.xOffset += step;
				drawRightBackground();
				if (msgBox.xOffset >= endX) {
					return resolve();
				} else {
					msgBox.draw();
					drawFooter();
					timeouts.animID = setTimeout(animate, delay);
				}
			};
			animate();
		});
	};

	let firstTouch = true;
	const handler = function(e) {
		if (e.b === 0) {
			firstTouch = true;
		}
		// console.log("top of handler: first touch = ", firstTouch);
		// // console.log("top of handler: e = ", e);
		if (switching) return;	// don't respond to touch while we are animating
		if (firstTouch && e.b === 1) {
			if (buzzing) {
				require("messages").stopBuzz();
				buzzing = false;
			}
			setBusy();
			let idx = Bangle.MESSAGES.findIndex(m => m.id === msgBoxes[messageNum].msg.id); // TODO maybe we don't to do this check every time
			if (idx >= 0) delete Bangle.MESSAGES[idx].new;
			msgBoxes[messageNum].clearNew();
			// console.log("do tests");
			// console.log("dy, dx", e.dy, e.dx);
			// console.log("e", e);
			if (Math.abs(e.dy) > Math.abs(e.dx)) {
				firstTouch = false;
				// console.log("up down");
				if (e.dy > 0 && msgBoxes[messageNum].top) {
					mode = "prev";
				} else if (msgBoxes[messageNum].bottom) { // e.dy will be < 0 here
					mode = "next";
				} else {
					mode = "scroll";
				}
			} else if (Math.abs(e.dx) > Math.abs(e.dy)) {
				firstTouch = false;
				// console.log("left right");
				if (e.dx < 0) {
					mode = "left";
				} else {
					mode = "right";
				}
			} else {
				mode = undefined;
				return;
			}
		}
		if (mode == "scroll") scrollHandler(e);
		else if (mode == "left") leftHandler(e); // remove from phone and watch
		else if (mode == "right") rightHandler(e); // remove from watch only
		else if (mode == "next") nextHandler(e);
		else if (mode == "prev") prevHandler(e);
	};

	const nextHandler = function(e) {
		// console.log("nextHandler");
		// console.log(e);
		if (e.b == 0) {
			// console.log("firstTouch = ", firstTouch);
			checkForNewMessages();
			// firstTouch = true;
		}
		if (messageNum == msgBoxes.length - 1) return; // already on last message
		switching = true;
		toNext().then(() => {
			switching = false;
		});
	};

	const prevHandler = function(e) {
		if (e.b == 0) {
			checkForNewMessages();
			// firstTouch = true;
		}
		if (messageNum == 0) return;  // already on first message
		switching = true;
		toPrev().then(() => {
			switching = false;
		});
	};

	const leftHandler = function(e) {
		const msgBox = msgBoxes[messageNum];
		if (e.b == 0) {
			// firstTouch = true;
			if (msgBox.xOffset > -swipeThreshold) {
				msgBox.xOffset = 0;
				msgBox.draw();
				drawFooter();
			} else {
				switching = true;
				animateToLeft().then(() => {
					g.setBgColor(g.theme.bg);
					dismissOnPhone();
					removeMessage();
					switching = false;
					checkForNewMessages();
				});
			}
			return;
		}
		msgBox.xOffset += e.dx;
		if (msgBox.xOffset > 0) msgBox.xOffset = 0;
		drawLeftBackground();
		msgBox.draw();
		drawFooter();
	};

	const rightHandler = function(e) {
		const msgBox = msgBoxes[messageNum];
		if (e.b == 0) {
			// firstTouch = true;
			if (msgBox.xOffset < swipeThreshold) {
				msgBox.xOffset = 0;
				msgBox.draw();
				drawFooter();
			} else {
				switching = true;
				animateToRight().then(() => {
					g.setBgColor(g.theme.bg);
					removeMessage();
					switching = false;
					checkForNewMessages();
				});
			}
			return;
		}
		msgBox.xOffset += e.dx;
		if (msgBox.xOffset < 0) msgBox.xOffset = 0;
		drawRightBackground();
		msgBox.draw();
		drawFooter();
	};

	const scrollHandler = function(e) {
		if (e.b === 0) {
			// firstTouch = true;
			checkForNewMessages();
		}
		msgBoxes[messageNum].scroll(e.dy);
	};

	Bangle.setUI({
		mode: "custom",
		drag: e => handler(e),
		btn: _e => goBack(),
		remove: cleanup
	});

	msgBoxes[messageNum].draw();
	drawFooter();
	checkForNewMessages();
};

if (!Bangle.MESSAGES || !Bangle.MESSAGES.length) {
	Bangle.MESSAGES = require("messages").getMessages();
}
if (!Bangle.MESSAGES.length) showNoMessages();

if (Bangle.notify) {	// this is set in messagecenter.notify.js
	buzzing = true;
	require("messages").buzz(Bangle.MESSAGES[0].src);
	delete Bangle.notify;
}

showText(true);