import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = new Logger(__filename, electronConsole);

import * as FileType from 'file-type'

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

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

export default function createImageOverlay(state: IState, server: ClientController, resourceId: string, resourceName: string): HTMLElement {
    const { document } = state;
    $.setDocument(document);

    let element = BaseElements.createOverlay(document, { class: 'content popup-image', content: [
        { tag: 'img', src: './img/loading.svg', alt: resourceName, title: resourceName },
        { class: 'download', content: [
            { class: 'info', content: [
                { class: 'name', content: resourceName },
                { class: 'size', content: 'Loading Size...' }
            ] },
            { class: 'button', content: 'Loading...' }
        ] }
    ] });

    (async () => {
        try {
            let resourceBuff = await server.fetchResource(resourceId);
            let src = await ElementsUtil.getImageBufferSrc(resourceBuff);
            ($$$(element, '.content img') as HTMLImageElement).src = src;
            $$$(element, '.download .size').innerText = ElementsUtil.humanSize(resourceBuff.length);

            let { mime, ext } = (await FileType.fromBuffer(resourceBuff)) ?? { mime: null, ext: null };
            if (mime === null || ext === null) throw new Error('unable to get mime/ext');

            $$$(element, '.content img').addEventListener('contextmenu', (e) => {
                let contextMenu = Elements.createImageContextMenu(resourceName, server, resourceBuff, mime as string, ext as string, false);
                document.body.appendChild(contextMenu);
                let relativeTo = { x: e.pageX, y: e.pageY };
                ElementsUtil.alignContextElement(contextMenu, relativeTo, { top: 'centerY', left: 'right' });
            });

            $$$(element, '.button').innerText = 'Save';
            $$$(element, '.button').addEventListener('click', ElementsUtil.createDownloadListener({
                downloadBuff: resourceBuff,
                resourceName: resourceName,
                downloadStartFunc: () => {
                    $$$(element, '.button').innerText = 'Downloading...';
                },
                downloadFailFunc: async () => {
                    $$$(element, '.button').innerText = 'Try Again';
                    await ElementsUtil.shakeElement($$$(element, '.button'), 400);
                },
                writeStartFunc: () => {
                    $$$(element, '.button').innerText = 'Writing...';
                },
                writeFailFunc: async () => {
                    $$$(element, '.button').innerText = 'Try Again';
                    await ElementsUtil.shakeElement($$$(element, '.button'), 400);
                },
                successFunc: (_downloadPath: string) => {
                    $$$(element, '.button').innerText = 'Reveal in Explorer';
                }
            }));
        } catch (e) {
            LOG.error('error loading overlay image', e);
            ($$$(element, '.content img') as HTMLImageElement).src = './img/error.png';
            $$$(element, '.download .size').innerText = 'err';
            $$$(element, '.button').innerText = 'Error';
        }
    })();
    return element;
}