let options = {
	srcFont: "6x8",
	titleFont: "12x20",
	bodyFont: "12x20",
	headerBgColor: g.theme.bgH,
	headerFgColor: g.theme.fg,
	headerHlColor: g.toColor(0, 1, 0),
	margin: 3,	// space on sides
	padding: 8,	// space between header and body
	fh: 20, // footer height - leave this much space for a footer
};

setOptions = function(opts) {
	options = Object.assign(options, opts);
};

setClipRect = function (x, y, x2, y2) {
	if (y < Bangle.appRect.y) y = Bangle.appRect.y;
	if (y2 < Bangle.appRect.y) y2 = Bangle.appRect.y;
	if (y > Bangle.appRect.y2 - 10) y = Bangle.appRect.y2 - options.fh - 1;
	if (y2 > Bangle.appRect.y2 - 10) y2 = Bangle.appRect.y2 - options.fh - 1;
	return g.setClipRect(x, y, x2, y2);
};

const centerString = (str, x, y, w) => {
	g.setFontAlign(0, -1);
	g.drawString(str, x + (w / 2), y);
};

HeaderBox = function(msg, messageRect) {
	this.icon = require("messageicons").getImage(msg);
	this.color = require("messageicons").getColor(msg, {default:g.theme.fg2});
	this.iconSize =  48;
	this.titleW =  messageRect.w - this.iconSize;
	if (!msg.body) this.titleLines = "";
	else {
		this.titleLines = (() => {
			if (msg.title) return g.setFont(options.titleFont).wrapString(msg.title, this.titleW);
			else return "";
		})();
	}
	let sw = g.stringWidth(msg.title);	// string width
	let ew = g.stringWidth("...");	// elipsis width
	let w = this.titleW - ew - options.margin; // max width for title
	let cw = sw / msg.title.length; // character width - will only be an average if not a fixed width font
	this.titleOneLine = msg.title.substr(0, Math.floor(w / cw)).concat("...");
	this.titleLineH = g.setFont(options.titleFont).getFontHeight();
	this.titleX = 0;
	this.titleY = 0;
	this.srcLineH = g.setFont(options.srcFont).getFontHeight();
	this.srcLines = g.wrapString(msg.src, this.iconSize);
	this.srcH = this.srcLineH * this.srcLines.length;
	this.srcX = this.x2 - this.iconSize;
	this.srcY = 0;
	this.im = g.imageMetrics(this.icon);
	this.imgX = this.titleW + ((this.iconSize - this.im.width) / 2);
	this.minH = Math.max(this.titleLineH, this.srcH + this.im.height) + options.padding;
	this.maxH = Math.max(this.titleLineH * this.titleLines.length, this.iconSize) + options.padding;
	this.h = this.maxH;
	this.new = msg.new ?? false;
}; // HeaderBox

HeaderBox.prototype.draw = function(messageRect) {
	const getImgY = () => (this.h - options.padding - this.im.height + (this.h == this.maxH ? this.srcH : 0)) / 2;
	const x = messageRect.x
	const x2 = messageRect.x2;
	const y = messageRect.y;
	if (this.h < this.minH) this.h = this.minH;
	else if (this.h > this.maxH) this.h = this.maxH;
	let y2 = messageRect.y + this.h - 1;
	exports.setClipRect(x, y, x2, y2);
	g.setBgColor(options.headerBgColor).clearRect(x, y, x2, y2);
	g.setBgColor(g.theme.bg2).clearRect(x+3, y+3, x2-3, y2-3);
	if (this.new) g.setColor(options.headerHlColor).fillPoly([x, y, x + 20, y, x, y + 20]);
	g.setColor(options.headerFgColor);
	g.setFont(options.titleFont);
	if (this.h > this.minH) {	// multi-line title
		let titleY = Math.floor(((this.h - options.padding - (this.titleLineH * this.titleLines.length)) / 2) + y);
		if (this.titleLines) {
			for (let line of this.titleLines) {
				centerString(line, x, titleY, this.titleW);
				titleY += this.titleLineH;
			}
		}
	} else {	// single-line title
		const titleY = Math.floor(((this.h - options.padding - this.titleLineH) / 2) + y);
		centerString(this.titleOneLine, x + options.margin, titleY, this.titleW);
	}
	g.setFont(options.srcFont);
	if (this.h == this.maxH) {
		let srcY = y+4;
		for (let line of this.srcLines) {
			centerString(line, x2 - this.iconSize, srcY, this.iconSize);
			srcY += this.srcLineH;
		}
	}
	g.setColor(this.color).drawImage(this.icon, x + this.imgX, y + getImgY());
};

const TextBox = function(msg, messageRect) {
	if (msg.body) body = msg.body;
	else body = msg.title;
	this.lineH = (g.setFont(options.bodyFont).getFontHeight()) + 2; // plus 2 to add a little spacing between lines
	this.lines = g.wrapString(body, messageRect.w - options.margin);
	if (msg.subject) {	// If there's a subject, add it to the top
		lines.splice(0, 0, msg.subject);
	}
	this.scrollY = 0;
	this.minY = messageRect.y2 - (this.lineH * (this.lines.length + 3));
	if (this.minY > 0) this.minY = 0;
}; // TextBox

TextBox.prototype.draw = function(messageRect, yOffset) {
	x = messageRect.x;
	y = messageRect.y + yOffset;
	x2 = messageRect.x2;
	y2 = messageRect.y2;
	g.setColor(g.theme.fg).setBgColor(g.theme.bg);
	exports.setClipRect(x, y, x2, y2);
	g.clearRect(x, y, x2, y2);
	g.setFont(options.bodyFont).setFontAlign(-1, -1);
	let lineY = this.scrollY;
	for (let line of this.lines) {
		if (y + lineY >= y - this.lineH) g.drawString(line, x + options.margin, y + lineY);
		lineY += this.lineH;
	}
};

MessageBox = function(msg, yOffset) {
	this.msg = msg;
	this.yOffset = yOffset ??  0;
	this.xOffset = 0;
	this.rect = {
		w: Bangle.appRect.w,
		h: Bangle.appRect.h,
		x: Bangle.appRect.x + this.xOffset,
		y: Bangle.appRect.y + this.yOffset,
		x2:Bangle.appRect.x2 + this.xOffset,
		y2: Bangle.appRect.y2 + this.yOffset
	};
	this.headerBox = new HeaderBox(msg, this.rect);
	this.textBox = new TextBox(msg, this.rect);
	let messageH = this.textBox.lines.length * this.textBox.lineH;
	let boxH = this.rect.h - this.headerBox.maxH - options.fh;
	if ( messageH <= boxH) this.oneScreen = true;
	else this.oneScreen = false;
	this.top = true;
	if (this.oneScreen) {
		this.bottom = true;
		this.textBox.initScrollY = Math.round((boxH - messageH) / 2);
	} else {
		this.bottom = false;
		this.textBox.initScrollY = 0;
	}
	this.textBox.scrollY = this.textBox.initScrollY;
	this.sbH = this.rect.h / messageH * this.rect.h; // scrollbar height
	this.sbRatio = (this.rect.h - this.sbH) / Math.abs(this.textBox.minY);	// scrollbar ratio
}; // MessageBox

MessageBox.prototype.prevOffset = Bangle.appRect.y - Bangle.appRect.h;
MessageBox.prototype.nextOffset = Bangle.appRect.y2 + 1;

MessageBox.prototype.setNew = function() {
	this.headerBox.new = true;
}

MessageBox.prototype.clearNew = function() {
	this.headerBox.new = false;
}

MessageBox.prototype.reset = function(yOffset) {
	if (!yOffset) yOffset = 0;
	this.yOffset = yOffset;
	this.headerBox.h = this.headerBox.maxH;
	this.textBox.scrollY = this.textBox.initScrollY;
	this.top = true;
	if (this.oneScreen) this.bottom = true;
	else this.bottom = false;
};

MessageBox.prototype.draw = function() {
	this.rect.x = Bangle.appRect.x + this.xOffset;
	this.rect.x2 = Bangle.appRect.x2 + this.xOffset;
	this.rect.y = Bangle.appRect.y + this.yOffset;
	this.rect.y2 = Bangle.appRect.y2 + this.yOffset;
	exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
	g.clearRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
	this.headerBox.draw(this.rect);
	this.textBox.draw(this.rect, this.headerBox.h);
	exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
	this.drawScrollbar();
	//this.drawFooter();
};

MessageBox.prototype.drawScrollbar = function() {
	if (this.oneScreen) return;
	let sbY = this.rect.y + (this.sbRatio * Math.abs(this.textBox.scrollY));
	g.setColor(g.theme.fg).drawLine(this.rect.x, sbY, this.rect.x, sbY + this.sbH);
};

MessageBox.prototype.scroll = function(dy) {
	if (this.oneScreen) return;
	// if ((dy > 0 && this.top) || (dy < 0 && this.bottom)) {
	// 	return;
	// }
	if (this.headerBox.h > this.headerBox.minH && dy < 0) {
		this.headerBox.h += dy;
		if (this.headerBox.h < this.headerBox.minH) this.headerBox.h = this.headerBox.minH;
	} else if (this.headerBox.h < this.headerBox.maxH && dy > 0) {
		this.headerBox.h += dy;
		if (this.headerBox.h > this.headerBox.maxH) this.headerBox.h = this.headerBox.maxH;
	}
	if (this.headerBox.h == this.headerBox.minH && dy < 0) this.textBox.scrollY += dy;
	else if (dy > 0) this.textBox.scrollY += dy;
	if (this.textBox.scrollY <= this.textBox.minY) {
		this.bottom = true;
		this.textBox.scrollY = this.textBox.minY;
	} else {
		this.bottom = false;
	}
	if (this.textBox.scrollY >= 0 && this.headerBox.h == this.headerBox.maxH) {
		this.top = true;
		this.textBox.scrollY = this.textBox.initScrollY;
	} else {
		this.top = false;
	}
	this.draw();
};

module.exports.HeaderBox = HeaderBox;
module.exports.MessageBox = MessageBox;
module.exports.setOptions = setOptions;
module.exports.setClipRect = setClipRect;