import ElementsUtil from './require/elements-util';
import BaseElements from './require/base-elements';
import { Channel } from '../data-types';
import createModifyChannelOverlay from './overlay-modify-channel';
import UI from '../ui';
import Actions from '../actions';
import Q from '../q-module';
import CombinedGuild from '../guild-combined';

export default function createChannel(document: Document, q: Q, ui: UI, guild: CombinedGuild, channel: Channel) {
	let element = q.create({ class: 'channel text', 'meta-id': channel.id, 'meta-server-id': guild.id, content: [
		// Scraped directly from discord (#)
		{ class: 'icon', content: BaseElements.TEXT_CHANNEL_ICON },
		{ class: 'name', content: channel.name },
		{ class: 'modify', content: BaseElements.COG }
	] }) as HTMLElement;

	element.addEventListener('click', async () => {
		if (element.classList.contains('active')) return;
		await ui.setActiveChannel(guild, channel);
		await Actions.fetchAndUpdateMessagesRecent(q, ui, guild, channel);
		q.$('#text-input').focus();
	});

	let modifyContextElement = q.create({ class: 'context', content: {
		class: 'above', content: [
			{ class: 'content text', content: 'Modify Channel' },
			{ class: 'tab', content: BaseElements.TAB_BELOW }
		]
	}}) as HTMLElement;

	q.$$$(element, '.modify').addEventListener('click', async (e) => {
		e.stopPropagation();
		if (modifyContextElement.parentElement) {
			modifyContextElement.parentElement.removeChild(modifyContextElement);
		}
		let modifyOverlay = createModifyChannelOverlay(document, q, guild, channel);
		document.body.appendChild(modifyOverlay);
		q.$$$(modifyOverlay, '.text-input.channel-name').focus();
		ElementsUtil.setCursorToEnd(q.$$$(modifyOverlay, '.text-input.channel-name'));
	});

	q.$$$(element, '.modify').addEventListener('mouseenter', () => {
		document.body.appendChild(modifyContextElement);
		ElementsUtil.alignContextElement(modifyContextElement, q.$$$(element, '.modify'), { bottom: 'top', centerX: 'centerX' });
	});

	q.$$$(element, '.modify').addEventListener('mouseleave', () => {
		if (modifyContextElement.parentElement) {
			modifyContextElement.parentElement.removeChild(modifyContextElement);
		}
	});

	return element;
}