import Elements from '../elements';

import ElementsUtil from './require/elements-util.js';
import BaseElements from './require/base-elements.js';

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

export default function createConnectionContextMenu(state: IState, server: ClientController) {
    const { document, ui } = state;

    $.setDocument(document);

    let statuses = [ 'online', 'away', 'busy', 'invisible' ];
    let content: any[] = [
        { class: 'item personalize', content: [
            { class: 'icon', content: { tag: 'img', src: './img/pencil-icon.png' } },
            { content: 'Personalize' }
        ] },
        { class: 'item-spacer' }
    ];
    content = content.concat(statuses.map(status => {
        return { class: 'item ' + status, content: [
            { class: 'status-circle' },
            { class: 'status-text', content: status }
        ] };
    }));
    let element = BaseElements.createContextMenu(document, { class: 'member-context', content: content });

    $$$(element, '.personalize').addEventListener('click', async () => {
        element.removeSelf();
        if (!ui.hasActiveConnection()) return;
        let overlayElement = Elements.createPersonalizeOverlay(server, ui.activeConnection as ConnectionInfo);
        document.body.appendChild(overlayElement);
        $$$(overlayElement, '.text-input').focus();
        ElementsUtil.setCursorToEnd($$$(overlayElement, '.text-input'));
    });

    for (let status of statuses) {
        $$$(element, '.' + status).addEventListener('click', async () => {
            element.removeSelf();
            let currentConnection = await server.fetchConnectionInfo();
            if (status != currentConnection.status) {
                await server.setStatus(status);
            }
        });
    }

    return element;
}