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 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';

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

    if (!ui.activeConnection) {
        LOG.warn('no active connection when creating server title context menu');
        return $.create({}) as HTMLElement;
    }

    let menuItems: any[] = [];

    if (ui.activeConnection.privileges.includes('modify_profile')) {
        menuItems.push({ class: 'item server-settings', content: [
            { class: 'icon', content: BaseElements.COG },
            'Server Settings'
        ] });
    }

    if (ui.activeConnection.privileges.includes('modify_channels')) {
        if (ui.activeConnection.privileges.includes('modify_profile')) {
            menuItems.push({ class: 'item-spacer' });
        }
        menuItems.push({ class: 'item create-channel', content: [
            { class: 'icon', content: BaseElements.CREATE },
            'Create Channel'
        ] });
    }

    if (ui.activeConnection.privileges.includes('modify_members')) {
        if (
            ui.activeConnection.privileges.includes('modify_profile') ||
            ui.activeConnection.privileges.includes('modify_channels')
        ) {
            menuItems.push({ class: 'item-spacer' });
        }
        menuItems.push({ class: 'item create-invite-token', content: [
            { class: 'icon', content: BaseElements.TOKEN },
            'Create Invite Token'
        ] });
        menuItems.push({ class: 'item token-log', content: [
            { class: 'icon', content: BaseElements.TOKEN },
            'Token Log'
        ] });
    }

    let element = BaseElements.createContextMenu(document, {
        class: 'server-title-context', content: menuItems
    });

    if (ui.activeConnection.privileges.includes('modify_profile')) {
        $$$(element, '.item.server-settings').addEventListener('click', async () => {
            element.removeSelf();
            let serverMeta = null;
            try {
                serverMeta = await server.grabMetadata();
            } catch (e) {
                LOG.error('error fetching server info', e);
            }
            if (serverMeta == null) {
                let overlay = Elements.createErrorMessageOverlay('Error Opening Settings', 'Could not load server information');
                document.body.appendChild(overlay);
            } else {
                let overlay = Elements.createServerSettingsOverlay(server, serverMeta);
                document.body.appendChild(overlay);
                $$$(overlay, '.text-input').focus();
                ElementsUtil.setCursorToEnd($$$(overlay, '.text-input'));
            }
        });
    }

    if (ui.activeConnection.privileges.includes('modify_channels')) {
        $$$(element, '.item.create-channel').addEventListener('click', () => {
            element.removeSelf();
            let overlay = Elements.createCreateChannelOverlay(server);
            document.body.appendChild(overlay);
            $$$(overlay, '.text-input.channel-name').focus();
            ElementsUtil.setCursorToEnd($$$(overlay, '.text-input.channel-name'));
        });
    }

    if (ui.activeConnection.privileges.includes('modify_members')) {
        $$$(element, '.item.create-invite-token').addEventListener('click', () => {
            element.removeSelf();
            let overlay = Elements.createCreateInviteTokenOverlay(server);
            document.body.appendChild(overlay);
            //LOG.info('create invite token clicked');
        });
        $$$(element, '.item.token-log').addEventListener('click', () => {
            element.removeSelf();
            let overlay = Elements.createTokenLogOverlay(server);
            document.body.appendChild(overlay);
        });
    }

    return element;
}