const showCall = function(call) {
	const incomingImg = require("heatshrink").decompress(atob("j0ewIQNgwDCnEAh0B4EAvEOgEB+F//kP4P/+E/weAgH+g8Agf4CQMH8EYgEfEYU8AYV4AQIhBAYMD8ADBg4vBgEPzwDBj/+AYM/AYV//ADCC4X/EwQiCABo="));
	const outgoingImg = require("heatshrink").decompress(atob("j0ewIRO4ACBgeAh0Ag8AvEAh0B+F//kP4P/+E/wASB/0AjkD/EA8EH8EDgEfEwU8AYQhBgAhBFwXgAYMHGwUPzwDBj4mBgE/AYV/FQIDBC4X/EwQiCABoA=="));
	const ringingImg = require("heatshrink").decompress(atob("mUywIlimAFEhgFEgYSF4AWEAIYWBAIYWBAIcAsAYBgOAgEYCwQJBBwIWBHIXAA4YSC4EGAoICCDwQ8DAQUgAQMQVtsD///AoU/AoIGCv5BBh/4gF+B4UfwF4Dgd4nAFDg8cB4P/8EA9gFC/wgBBwIzBwEDSQaOB+BzCRAM8SQSQBDAKSCTAPADwMAGoPwh4eBg+An0/SQX/jv/TwUH/wlBAAQkBADwA="));
	const leftImg = require("heatshrink").decompress(atob("mEwwJC/AAkBgEQAoUDwE4AoUHwF4AoUPgHwAoUegPgAoU8gfAAoV4DAIFC+AYBFwXgjwuD4E8FygFFCIodFFIo1FIIpNGLIowSRIiVFAH4A="));
  const rightImg = require("heatshrink").decompress(atob("mEwwJC/AAcIgGAAoUcgPAAoUegPgAoUPgHwAoUHwF4AoUD4E8AoQWBjwqD+AZBAAV4DIIFCngZBGCgFFCIodFFIo1FIIhNFLIouRRIqVFAH8AA=="));
	Bangle.setUI();	// clear from previous
	g.reset().clear();
	msg = call;
	delete msg.new;
	if (!msg.name) {
		let pn = msg.number.replaceAll(/\D/, "");		// remove any non digit characters
		msg.title = `${pn.slice(-10, -7)}-${pn.slice(-7,-4)}-${pn.slice(-4)}`;
	}
	const cmd = msg.cmd;

	const HeaderBox = require("messagebox").HeaderBox;
	const headerBox = new HeaderBox(msg, Bangle.appRect);
	const x = Bangle.appRect.x, y = Bangle.appRect.y + headerBox.h, x2 = Bangle.appRect.x2, y2 = Bangle.appRect.y2;
	const mx = (x + x2) / 2;
	let timerInt;			//TODO deal with this
	headerBox.draw(Bangle.appRect);
	g.reset();

	const drawLeftArrow = function(imgX) {
		imgX = imgX ?? x+2;
		g.setColor(1 ,0.25, 0.25);
		g.drawImage(leftImg, imgX, y2-50);
	};
	const drawRightArrow = function(imgX) {
		imgX = imgX ?? x2-50;
		g.setColor(0, 1, 0);
		g.drawImage(rightImg, imgX, y2-50);
	};
	if (cmd === "end") {
		if (timerInt) clearTimeout(timerInt);		//TODO change timerInt variable
		g.setColor(g.theme.fg).setFont("6x15:2").setFontAlign(0, -1);
		g.drawString("Call Ended", mx, y+25);
		endTimeout = setTimeout(() => g.clear(), 3000);
	}

	if (cmd === "incoming") {
		drawLeftArrow();
		drawRightArrow();
		g.setColor(0,1,0);
		g.drawImage(ringingImg, mx-25, y+15);
	}
	if (cmd === "start" || cmd === "outgoing") {
		drawLeftArrow(x2 - 52);
		startTime = parseInt(Date.now()/1000);
		g.setColor(g.theme.fg);
		g.drawImage(cmd === "start" ? incomingImg : outgoingImg, x+10, y+20);
		const timer = () => {
			g.clearRect(mx-45, y+20, mx+70, y+50);
			elapsed = parseInt(Date.now()/1000) - startTime;
			const h = ("0" + Math.floor((elapsed/3600)%60)).slice(-2);
			const m = ("0" + Math.floor((elapsed/60)%60)).slice(-2);
			const s = ("0" + Math.floor(elapsed%60)).slice(-2);
			g.setFont("Vector:25").setFontAlign(0, -1).drawString(`${h}:${m}:${s}`, mx + 15, y+25);
			timerInt = setTimeout(timer, 1000);		//TODO put into intervals object
		};
		timer();
	}

	const handler = function(dir) {

	}

	Bangle.setUI({
		mode: "custom",
		swipe: handler,
		btn: () => {clearInterval(timerInt)}
	});
};



let msg = {"t":"call","cmd":"start","name":"","number":"1306-7740297","id":"call","src":"Phone","positive":true,"negative":true,"title":"Hayley Thiessen, Wifey","body":"Incoming call\n13067740297","new":true,"show":true,"type":"call"}

g.reset();
showCall(msg);