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

import createPersonalizeOverlay from './overlay-personalize.js';
import Q from '../q-module.js';
import UI from '../ui.js';
import CombinedGuild from '../guild-combined.js';

export default function createConnectionContextMenu(document: Document, q: Q, ui: UI, guild: CombinedGuild) {
	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 });

	q.$$$(element, '.personalize').addEventListener('click', async () => {
		element.removeSelf();
		if (ui.activeConnection === null) return;
		let overlayElement = createPersonalizeOverlay(document, q, guild, ui.activeConnection);
		document.body.appendChild(overlayElement);
		q.$$$(overlayElement, '.text-input').focus();
		ElementsUtil.setCursorToEnd(q.$$$(overlayElement, '.text-input'));
	});

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

	return element;
}