import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

import * as moment from 'moment';

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

import { $, $$, $$$, $$$$ } from './require/q-module';
import { Message, Member, IDummyTextMessage, ConnectionInfo } from '../data-types';
import IState from './require/elements-state';
import ClientController from '../client-controller';

export default function createTextMessage(state: IState, server: ClientController, message: Message | IDummyTextMessage): HTMLElement {
    const { document } = state;
    $.setDocument(document);

    let memberInfo: {
        roleColor: string | null,
        displayName: string,
        avatarResourceId: string | null
    };
    if (message instanceof Message) {
        if (message.member instanceof Member) {
            memberInfo = {
                roleColor: message.member.roleColor,
                displayName: message.member.displayName,
                avatarResourceId: message.member.avatarResourceId
            };
        } else {
            memberInfo = {
                roleColor: null,
                displayName: 'Unknown Member',
                avatarResourceId: null
            };
        }
    } else {
        memberInfo = {
            roleColor: null,
            displayName: message.member.displayName,
            avatarResourceId: message.member.avatarResourceId
        };
    }

    let nameStyle = memberInfo.roleColor ? 'color: ' + memberInfo.roleColor : '';
    let element = $.create({ class: 'message', 'meta-id': message.id, 'meta-member-id': message.member.id, 'meta-server-id': server.id, content: [
        { class: 'member-avatar', content: { tag: 'img', src: './img/loading.svg', alt: memberInfo.displayName } },
        { class: 'right', content: [
            { class: 'header', content: [
                { class: 'member-name', style: nameStyle, content: memberInfo.displayName },
                { class: 'timestamp', content: moment(message.sent).calendar(ElementsUtil.calendarFormats) }
            ] },
            { class: 'content text', content: ElementsUtil.parseMessageText(message.text || '') }
        ] }
    ] }) as HTMLElement;
    (async () => {
        ($$$(element, '.member-avatar img') as HTMLImageElement).src =
            await ElementsUtil.getImageBufferFromResourceFailSoftly(server, memberInfo.avatarResourceId);
    })();
    return element;
}