const r = Bangle.appRect;
const dow = ["S", "M", "T", "W", "T", "F", "S"];
let button = [[],[],[]];

const ms2String = function(ms) {
	let h = Math.floor(ms / 3600000);
	let m = Math.floor((ms / 60000) % 60);
	if (m < 10) m = "0" + m;
	let meridiem = "AM";
	if (ms >= 43200000) { //12h * 60min * 60sec * 1000ms is 12:00pm
		meridiem = "PM";
		h -= 12;
	}
	return {time: h + ":" + m, meridiem: meridiem};
};

exports.dowPicker = function(alarm, submit, changeTime) {
/**
* alarm: alarm object
* submit: function, callback when ok button tapped
* changeTime: function, callback when alarm time is tapped
*/
	if (alarm.rp) bits = alarm.dow;
	else bits = 0b0000000;
	g.clearRect(Bangle.appRect);
	setupButtons();
	drawButtons();
	drawTime(alarm.t);
	setTimeout(() => {
		Bangle.setUI({mode: "custom", touch: (n, e) => buttonHandler(n, e, alarm, submit, changeTime)});
	}, 100);
}

drawButton = function(button) {
	// {x: number, y: number, w: number, h: number, label: string}
	g.setFont("Vector:27").setFontAlign(0,0).setColor(0, 1, 1);
	g.fillRect({x: button.x, y: button.y, x2: button.x + button.w - 1, y2: button.y + button.h - 1, r: 12});


	if (!((bits >> button.dowNumber) & 1) || button.dowNumber === undefined) {
		g.setColor(0, 0, 0).fillRect({x: button.x + 1, y: button.y + 1, x2: button.x + button.w - 2, y2: button.y + button.h - 2, r: 11});
		g.setColor(1, 1, 1)
	}
	else g.setColor(0, 0, 0);
	g.setFontAlign(0,0).drawString(button.label, button.x + (button.w / 2), button.y + (button.h / 2));
};

drawTime = function(ms) {
	const timeStr = ms2String(ms);
	//g.setColor(0, 1, 1).fillRect({x: r.x, y: r.y, x2: r.x2, y2: r.y + 42, r: 12})
	g.setColor(1, 1, 1).setFontAlign(-1, 1).setFont("Vector:40");
	const sw = g.stringWidth(timeStr.time);
	g.drawString(timeStr.time, r.x + 4, r.y + 40);
	g.setFont("Vector:23").drawString(timeStr.meridiem, r.x + 4 + sw, r.y + 35);
};

const setupButtons = function() {
	for (let i = 0, x = 0; i <= 3; i++, x += 44) {
		button[0].push({x: r.x + x, y: r.y + 47, w: 40, h: 40, label: dow[i], dowNumber: i});
	}
	for (let i = 4, x = 22; i <= 6; i++, x += 44) {
		button[1].push({x: r.x + x, y: r.y + 91, w: 40, h: 40, label: dow[i], dowNumber: i});
	}
	button[2].push({x: r.x, y: r.y2 - 41, w: r.x + r.w - 1, h: 40, label: "OK"});
};

const drawButtons = function() {
	g.setFontAlign(0, 1).setFont("Vector:25");
	for (let row = 0; row <= 2; row++) {
		for (let col = 0; col < button[row].length; col++)
		{
			drawButton(button[row][col]);
		}
	}
};

const buttonHandler = function(_n, e, alarm, submit, changeTime) {
// get row:
	let row;
	if (e.y < 50) {
		Bangle.setUI();
		changeTime(alarm);
		return;
	}
	if (e.y > 50) row = 0;
	if (e.y > 94) row = 1;
	if (e.y > 135) row = 2;
// get column:
	let col = 0;
	if (row === 0) {
		// less than 44 col = 0
		if (e.x > 44) col = 1;
		if (e.x > 2 * 44) col = 2;
		if (e.x > 3 * 44) col = 3;
 	}
 	if (row === 1) {
		// less than 66 col = 0
		if (e.x > 66) col = 1;
		if (e.x > 110) col = 2;
	}
	if (row === 2) {	// submit button
		Bangle.setUI();
		if (bits) {
			alarm.rp = true;
			alarm.dow = bits;
		} else {
			alarm.rp = false;
			alarm.dow = 0b1111111;
		}
		submit();
		return;
	}
	bits = bits ^ (1 << button[row][col].dowNumber); // flip bit
  drawButton(button[row][col]);
}