import ClientController from "../client-controller";
import { Member } from "../data-types";
import IState from "./require/elements-state";
import ElementsUtil from "./require/elements-util";

import { $, $$, $$$, $$$$ } from './require/q-module';

export default function createMember(state: IState, server: ClientController, member: Member): HTMLElement {
    const { document } = state;
    $.setDocument(document);

    let nameStyle = member.roleColor ? 'color: ' + member.roleColor : '';
    let element = $.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 () => {
        ($$$(element, 'img.avatar') as HTMLImageElement).src =
            await ElementsUtil.getImageBufferFromResourceFailSoftly(server, member.avatarResourceId);
    })();
    return element;
}