class Markup {
	private static scrollToBottom(opts: { animate?: boolean } = {}) {
		App.messagesRoot.scrollTop = App.messagesRoot.scrollHeight;
	}
	
	private static messageMarkup(m: Message): string {
		const incomingStr = m.incoming ? 'incoming' : 'outgoing';
		return `<div class="message ${incomingStr}">
			<div class="message-inner">${Utils.escape(m.content)}</div>
		</div>`;
	}
	
	static append(m: Message) {
		const s = this.messageMarkup(m);
		App.messagesRoot.insertAdjacentHTML('beforeend', s);
		this.scrollToBottom();
	}
	
	/**
	 * Bucketize a float into a level 
	 * according to a set of thresholds.
	 */
	static attentionThreshold(att: number): number {
		const thresholds = [2, 4.5, 10, 30];
		for (const [i, x] of thresholds.entries()) {
			if (x > att) {
				return i;
			}
		}
		return thresholds.length;
	}
}