import ClientController from "../client-controller";
import { Member } from "../data-types";
import Q from "../q-module";

import ElementsUtil from "./require/elements-util";

export default function createMember(q: Q, server: ClientController, member: Member): HTMLElement {
	let nameStyle = member.roleColor ? 'color: ' + member.roleColor : '';
	let element = q.create({ class: 'member ' + member.status, 'meta-id': member.id, content: [
		{ class: 'icon', content: [
			{ tag: 'img', class: 'avatar', src: './img/loading.svg', alt: member.displayName },
			{ class: 'status-circle' }
		] },
		{ class: 'text', content: [
			{ class: 'name', style: nameStyle, content: member.displayName },
			{ class: 'status-text', content: member.status }
		] }
	] }) as HTMLElement;
	(async () => {
		(q.$$$(element, 'img.avatar') as HTMLImageElement).src =
			await ElementsUtil.getImageBufferFromResourceFailSoftly(server, member.avatarResourceId);
	})();
	return element;
}