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},

	{"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},

	{"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},

	{"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},

	{"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},

	{"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},

];


const goBack = function() {
    // if (back==="call" && call) showCall();
    // else if (back==="map" && map) showMap();
    // else if (back==="music" && music) showMusic();
    // else if (back==="messages" && messageList.length) showMessage();
    // else if (back) showMain(); // previous screen was "main", or no longer valid
    // else quitApp(); // no previous screen: go back to clock
		console.log("go back");
};

	//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();
/////////////////////////////////

setClipRect = function (x, y, x2, y2) {
	if (y < Bangle.appRect.y) y = Bangle.appRect.y;
	if (y2 < Bangle.appRect.y2) y2 = Bangle.appRect.y2;
	return g.setClipRect(x, y, x2, y2);
};

let active;

/**
 * @param messageList {array} all messages
 * @param showAll {bool} true to show all messages, false to only show new messages, default: false
 */

const newMessage = (type, msg) => {
	require("messages").apply(msg, Bangle.MESSAGES);
	if (type === "text" && active === "message") {
		Bangle.emit("updateMessages");
		// console.log("new message: ", type, msg);
	}
}
Bangle.on("message", newMessage);

const showMessage = function(allMessages, showAll) {
	let switching = false;
	let updatingMessages = false;
	let shouldUpdateMessages = false;
	let idle = false;

	const updateMessages = function() {
		console.log("updating messages");
		activeMsgId = msgBoxes[messageNum].msg.id;
		let newMessages = Bangle.MESSAGES.filter((m) => {
			if (messageList.find((n) => n.id === m.id) === undefined && // not already in messageList
				m.new) return true;	// and it's new
			else return false;
		});
		const waitUntilIdle = () => {
			if (idle && !switching) {
				for (let msg of newMessage) {
					msgBoxes.unshift(new MessageBox(msg));
					messageList.unshift(msg);
				}
				messageNum = messageList.findIndex((m) => m.id === activeMsgId);
				refresh();
				shouldUpdateMessages = false;
				updatingMessages = false;
				return;
			} else {
				setTimeout(waitUntilIdle, 250);
			}
		};
	}

	Bangle.on("updateMessages", () => {shouldUpdateMessages = true;});
	active = "message";
	let MessageBox = require("messagebox").MessageBox;
	require("messagebox").setOptions({fh: 30});
	const step = 89;
	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;
	let messageList = showAll ? allMessages : allMessages.filter(m => m.new);
	if (!messageList.length) {
     console.log("No messages")
		 return;
	}
	Bangle.setLocked(false);
	Bangle.setLCDPower(true);

	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;
		else if ( i == messageNum + 1) msgBoxes[i].yOffset = MessageBox.prototype.nextOffset;
		i++;
	}


	const drawFooter = function() {
		let fh = 10;	// footer height
		// left hint: swipe from left for main menu
		g.reset().clearRect(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2)
			.setFont(fontTiny)
			.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}/${messageList.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 && this.bottom)
			g.drawString("\0"+atob("CAiBAABBIhRJIhQI"), Bangle.appRect.x+Bangle.appRect.w/2-fw/2, Bangle.appRect.y2); // v swipe to next
		if (messageNum > 0 && this.top)
			g.drawString("\0"+atob("CAiBABAoRJIoRIIA"), Bangle.appRect.x+Bangle.appRect.w/2+fw/2, 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 = () => {
			allMessages = allMessages.filter((m) => m.id != msgBoxes[messageNum.id]);	// remove from messages array
			msgBoxes.splice(messageNum, 1);	// remove from msgBoxes
			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
			if (messageNum < 0) {
				Bangle.setUI();
				return goBack();	// no more messages
			}
			// if (messageNum > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
			// msgBoxes[messageNum].reset();
			// if (messageNum < msgBoxes.length - 1)	msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
			refresh();
			msgBoxes[messageNum].draw();
			drawFooter();
		};
		if (messageNum < msgBoxes.length - 1) {
			toNext(true).then(() => {
				removeAndReset();
				switching = false;
			});
		} else if (messageNum > 0) {
			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
	};

	let animID;
	const toNext = function(removeCurrent) {
		if (removeCurrent == undefined) removeCurrent = false;
		if (animID){
			clearTimeout(animID);
			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++;
							// msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
							// msgBoxes[messageNum].reset();
							// if (messageNum + 1 < msgBoxes.length) msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
							refresh();
						}
					}
					msgBoxes[messageNum].draw();
					drawFooter();
					return resolve();
				} else {
					msgBoxes[messageNum].draw();
					msgBoxes[messageNum + 1].draw();
					drawFooter();
					animID = setTimeout(animate, delay);
				}
			};
			animate();
		});
	};

	const toPrev = function(removeCurrent) {
		if (removeCurrent == undefined) removeCurrent = false;
		if (animID){
			clearTimeout(animID);
			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--;
							// if (messageNum - 1 > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
							// msgBoxes[messageNum].reset();
							// msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
							refresh();
						}
					}
					msgBoxes[messageNum].draw();
					drawFooter();
					return resolve();
				} else {
					msgBoxes[messageNum].draw();
					msgBoxes[messageNum - 1].draw();
					drawFooter();
					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 (animID) {
			clearTimeout(animID);
			animID = undefined;
		}
		const msgBox = msgBoxes[messageNum];
		return new Promise((resolve, _reject) => {
			let animate = () => {
				msgBox.xOffset -= step
				drawLeftBackground();
				if (msgBox.xOffset <= Bangle.appRect.x - Bangle.appRect.w) {
					return resolve();
				} else {
					msgBox.draw();
					drawFooter();
					let animID = setTimeout(animate, delay);
				}
			};
			animate();
		});
	};

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

	let firstTouch = true;
	const handler = function(e) {
		if (updatingMessages) return;
		if (switching) return;	// don't repond to touch while we are animating
		if (firstTouch) {
			idle = false;
			if (e.dy > 0 && msgBoxes[messageNum].top) {
				firstTouch = false;
				mode = "prev";
			} else if (e.dy < 0 && msgBoxes[messageNum].bottom) {
				firstTouch = false;
				mode = "next";
			} else if (Math.abs(e.dx) > Math.abs(e.dy)) {
				firstTouch = false;
				if (e.dx < 0) mode = "left";
				else mode = "right";
			} else if (Math.abs(e.dy) > 0) {
				firstTouch = false;
				mode = "scroll";
			} else {
				mode = undefined;
				return;
			}
		}
		if (e.b == 0) {	// released finger, reset firstTouch for next time
			idle = true;
			firstTouch = true;
		}
		delete messageList[messageNum].new;
		if (mode == "scroll") scrollHandler(e.dy);
		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.dy);
		else if (mode == "prev") prevHandler(e.dy);
	};

	const nextHandler = function(dy) {
		if (messageNum == msgBoxes.length - 1) return; // already on last message
		switching = true;
		toNext().then(() => {
			switching = false;
		});
	};

	const prevHandler = function(dy) {
		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) {
			if (msgBox.xOffset > -swipeThreshold) {
				msgBox.xOffset = 0;
				msgBox.draw();
				drawFooter();
			} else {
				switching = true;
				animateToLeft().then(() => {
					dismissOnPhone();
					removeMessage();
					switching = false;
				});
			}
			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) {
			if (msgBox.xOffset < swipeThreshold) {
				msgBox.xOffset = 0;
				msgBox.draw();
				drawFooter();
			} else {
				switching = true;
				animateToRight().then(() => {
					removeMessage();
					switching = false;
				});
			}
			return;
		}
		msgBox.xOffset += e.dx;
		if (msgBox.xOffset < 0) msgBox.xOffset = 0;
		drawRightBackground();
		msgBox.draw();
		drawFooter();
	}

	const scrollHandler = function(dy) {
		msgBoxes[messageNum].scroll(dy);
	};

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

	msgBoxes[messageNum].draw();
	drawFooter();
	idle = true;
};

showMessage(Bangle.MESSAGES);