/**
 * @author Martin Karkowski
 * @email m.karkowski@zema.de
 * @create date 2019-09-17 19:42:00
 * @modify date 2020-03-12 14:16:31
 * @desc [description]
 */

import { generateNetworkAtElement } from '../user-interface/helpers';
import { IUndoRedoGraph } from '../interfaces/IGraph';
import { IVisjsOptions } from '../interfaces/IVisjsOptions';

/**
 * Function to create a Preview
 * @param graphData The Graph Data
 * @param position The Position
 * @param visjsOptions The Options of the Graph
 * @param options 
 */
export function openPreview<N, E>(graphData: {nodes: N[], edges: E[]}, position : {x:number, y:number}, visjsOptions: IVisjsOptions = {
    autoResize: false,
    manipulation: {
        enabled: false,
    },
    interaction: {
        dragNodes: true,
        dragView: true,
        hideEdgesOnDrag: false,
        hideNodesOnDrag: false,
        hover: true,
        keyboard: {
            enabled: true
        },
        multiselect: false,
        navigationButtons: false,
        selectable: true,
        zoomView: true
    },
    physics: false
},
options: {
    /** Width of the Preview */
    width?: number,
    /** Height of the Preview */
    height?: number,
    /** Background-Color of the Preview */
    backgroundColor?: string,
    /** Reference for the Position */
    mousePosition?: 'top-left' | 'bottom-right'
} = {}
) {
    let visjsNetwork = null;

    let div: HTMLDivElement = null;
    let background: HTMLDivElement = null; 
    /** Delete Old Preview */
    if (document.getElementById("previewWindow")){
        div = document.getElementById("previewWindow") as HTMLDivElement;
        document.getElementById("previewWindow").outerHTML = '';
    } else {
        div = document.createElement("div");
    }

    /** Delete Old Preview */
    if (document.getElementById("previewWindowBackground")){
        div = document.getElementById("previewWindowBackground") as HTMLDivElement;
        document.getElementById("previewWindowBackground").outerHTML = '';
    } else {
        background = document.createElement("div");
    }

    /** Define the Background */
    background.style.width = '100%';
    background.style.height = '100%';
    background.style.zIndex = (Number.MAX_SAFE_INTEGER-1).toString();
    background.style.backgroundColor = "rgba(0,0,0,0.5)"
    background.style.top = '0px';
    background.style.left = '0px';
    background.style.position = 'fixed';
    background.id = "previewWindowBackground";

    /** Add the DIV to the Body. */
    document.getElementsByTagName("body")[0].appendChild(background);

    if (!options.width) {
        options.width = 700;
    }
    if (!options.height) {
        options.height = 400;
    }
    if (!options.mousePosition) {
        options.mousePosition = 'bottom-right';
    }

    const xOffset = options.mousePosition === 'bottom-right' ? 0 - options.width : 0;
    const yOffset = options.mousePosition === 'bottom-right' ? 0 - options.height : 0;

    // Create new div on mouse position
    div.style.width = options.width.toString() + 'px';
    div.style.height = options.height.toString() + 'px';
    div.style.backgroundColor = options.backgroundColor || "white";
    div.style.borderWidth = "5px";
    div.style.borderColor = "grey";
    div.style.borderRadius = "10px";
    div.style.zIndex = Number.MAX_SAFE_INTEGER.toString();
    div.id = "previewWindow";
    

    div.style.position = "absolute";
    /** Position the DIV -> TODO */
    div.style.left =  (position.x + xOffset).toString() + "px";
    div.style.top = (position.y + yOffset).toString() + "px";

    /** Add the DIV to the Body. */
    document.getElementsByTagName("body")[0].appendChild(div);

    // Show clustered Elements in div
    try {
        /** Dont use the Stack. */
        visjsNetwork = generateNetworkAtElement(document.getElementById("previewWindow"), visjsOptions, 0);
        visjsNetwork.network.clear();
        /** Load the Data */
        (visjsNetwork.network as IUndoRedoGraph<N,E>).loadData(graphData);
        /** Fit the Graph */
        (visjsNetwork.network as IUndoRedoGraph<N,E>).network.fit({ animation: false });
    } catch {

    }

    const close = () => {
        
        if (document.getElementById("previewWindow") != undefined) {
            document.getElementById("previewWindow").outerHTML = "";
        }

        if (document.getElementById("previewWindowBackground") != undefined) {
            document.getElementById("previewWindowBackground").outerHTML = "";
        }

        if (visjsNetwork) {
            (visjsNetwork.network as IUndoRedoGraph<N,E>).destroy();
            visjsNetwork = null;
        }
    }


    background.onclick = close;

    return {
        network: visjsNetwork.network,
        close
    }
}