import { $, $$, $$$, $$$$ } from './require/q-module';

import Elements from '../elements';

import IState from './require/elements-state';
import ElementsUtil from './require/elements-util.js';
import BaseElements from './require/base-elements.js';
import ClientController from '../client-controller';
import { Channel } from '../data-types';

export default function createChannel(state: IState, server: ClientController, channel: Channel) {
    const { document, ui, actions } = state;

    $.setDocument(document);

    let element = $.create({ class: 'channel text', 'meta-id': channel.id, 'meta-server-id': server.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(server, channel);
        await actions.fetchAndUpdateMessagesRecent(server, channel);
        $('#text-input').focus();
    });

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

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

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

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

    return element;
}