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 { Channel } from '../data-types';
import BaseElements from './require/base-elements';
import IState from './require/elements-state';

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

export default function createUploadDropTarget(state: IState, server?: ClientController, channel?: Channel): HTMLElement | null {
    const { document } = state;
    $.setDocument(document);

    if (!server || !channel) return null;

    let element = BaseElements.createOverlay(document, { class: 'content drop-target', content: [
        // TODO: icon?
        { class: 'message', content: 'Upload to #' + channel.name }
    ] });
    element.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
    });
    element.addEventListener('dragleave', (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (element.parentElement) {
            element.parentElement.removeChild(element);
        }
    });
    element.addEventListener('drop', (e) => {
        e.preventDefault();
        element.parentElement?.removeChild(element);
        let fileTransferItem: DataTransferItem | null = null;
        for (let item of e.dataTransfer?.items ?? []) {
            if (item.kind == 'file') {
                e.preventDefault(); // don't continue the paste
                fileTransferItem = item;
                break;
            }
        }
        if (fileTransferItem) {
            let element = Elements.createUploadOverlayFromDataTransferItem(server, channel, fileTransferItem);
            document.body.appendChild(element);
            $$$(element, '.text-input').focus();
        } else {
            LOG.debug('dropped non-file');
        }
    });
    return element;
}