import {WorkflowStepInputModel}       from "cwlts/models/generic";
import {StepModel}                    from "cwlts/models/generic/StepModel";
import {WorkflowInputParameterModel}  from "cwlts/models/generic/WorkflowInputParameterModel";
import {WorkflowModel}                from "cwlts/models/generic/WorkflowModel";
import {WorkflowOutputParameterModel} from "cwlts/models/generic/WorkflowOutputParameterModel";
import {SVGPlugin}                    from "../plugins/plugin";
import {DomEvents}                    from "../utils/dom-events";
import {EventHub}                     from "../utils/event-hub";
import {Connectable}                  from "./connectable";
import {Edge as GraphEdge}            from "./edge";
import {GraphNode}                    from "./graph-node";
import {StepNode}                     from "./step-node";
import {TemplateParser}               from "./template-parser";
import {WorkflowStepOutputModel}      from "cwlts/models";

/**
 * @FIXME validation states of old and newly created edges
 */
export class Workflow {

    readonly eventHub: EventHub;
    readonly svgID = this.makeID();

    minScale = 0.2;
    maxScale = 2;

    domEvents: DomEvents;
    svgRoot: SVGSVGElement;
    workflow: SVGGElement;
    model: WorkflowModel;
    editingEnabled = true;

    /** Scale of labels, they are different than scale of other elements in the workflow */
    labelScale = 1;

    private workflowBoundingClientRect: any;
    private plugins: SVGPlugin[]  = [];
    private disposers: Function[] = [];

    private pendingFirstDraw = true;

    /** Stored in order to ensure that once destroyed graph cannot be reused again */
    private isDestroyed = false;

    constructor(parameters: {
        svgRoot: SVGSVGElement,
        model: WorkflowModel,
        plugins?: SVGPlugin[],
        editingEnabled?: boolean
    }) {
        this.svgRoot        = parameters.svgRoot;
        this.plugins        = parameters.plugins || [];
        this.domEvents      = new DomEvents(this.svgRoot as any);
        this.model          = parameters.model;
        this.editingEnabled = parameters.editingEnabled !== false; // default to true if undefined

        this.svgRoot.classList.add(this.svgID);

        this.svgRoot.innerHTML = `
            <rect x="0" y="0" width="100%" height="100%" class="pan-handle" transform="matrix(1,0,0,1,0,0)"></rect>
            <g class="workflow" transform="matrix(1,0,0,1,0,0)"></g>
        `;

        this.workflow = this.svgRoot.querySelector(".workflow") as any;

        this.invokePlugins("registerWorkflow", this);

        this.eventHub = new EventHub([
            "connection.create",
            "app.create.step",
            "app.create.input",
            "app.create.output",
            "beforeChange",
            "afterChange",
            "afterRender",
            "selectionChange"
        ]);

        this.hookPlugins();
        this.draw(parameters.model);


        this.eventHub.on("afterRender", () => this.invokePlugins("afterRender"));
    }

    /** Current scale of the document */
    private docScale = 1;

    get scale() {
        return this.docScale;
    }

    // noinspection JSUnusedGlobalSymbols
    set scale(scale: number) {
        this.workflowBoundingClientRect = this.svgRoot.getBoundingClientRect();

        const x = (this.workflowBoundingClientRect.right + this.workflowBoundingClientRect.left) / 2;
        const y = (this.workflowBoundingClientRect.top + this.workflowBoundingClientRect.bottom) / 2;

        this.scaleAtPoint(scale, x, y);
    }

    static canDrawIn(element: SVGElement): boolean {
        return element.getBoundingClientRect().width !== 0;
    }

    static makeConnectionPath(x1: any, y1: any, x2: any, y2: any, forceDirection: "right" | "left" | string = "right"): string | undefined {

        if (!forceDirection) {
            return `M ${x1} ${y1} C ${(x1 + x2) / 2} ${y1} ${(x1 + x2) / 2} ${y2} ${x2} ${y2}`;
        } else if (forceDirection === "right") {
            const outDir = x1 + Math.abs(x1 - x2) / 2;
            const inDir  = x2 - Math.abs(x1 - x2) / 2;

            return `M ${x1} ${y1} C ${outDir} ${y1} ${inDir} ${y2} ${x2} ${y2}`;
        } else if (forceDirection === "left") {
            const outDir = x1 - Math.abs(x1 - x2) / 2;
            const inDir  = x2 + Math.abs(x1 - x2) / 2;

            return `M ${x1} ${y1} C ${outDir} ${y1} ${inDir} ${y2} ${x2} ${y2}`;
        }
        return undefined;
    }

    draw(model: WorkflowModel = this.model) {

        this.assertNotDestroyed("draw");

        // We will need to restore the transformations when we redraw the model, so save the current state
        const oldTransform = this.workflow.getAttribute("transform");

        const modelChanged = this.model !== model;

        if (modelChanged || this.pendingFirstDraw) {
            this.pendingFirstDraw = false;

            this.model = model;

            const stepChangeDisposer        = this.model.on("step.change", this.onStepChange.bind(this));
            const stepCreateDisposer        = this.model.on("step.create", this.onStepCreate.bind(this));
            const stepRemoveDisposer        = this.model.on("step.remove", this.onStepRemove.bind(this));
            const inputCreateDisposer       = this.model.on("input.create", this.onInputCreate.bind(this));
            const inputRemoveDisposer       = this.model.on("input.remove", this.onInputRemove.bind(this));
            const outputCreateDisposer      = this.model.on("output.create", this.onOutputCreate.bind(this));
            const outputRemoveDisposer      = this.model.on("output.remove", this.onOutputRemove.bind(this));
            const stepInPortShowDisposer    = this.model.on("step.inPort.show", this.onInputPortShow.bind(this));
            const stepInPortHideDisposer    = this.model.on("step.inPort.hide", this.onInputPortHide.bind(this));
            const connectionCreateDisposer  = this.model.on("connection.create", this.onConnectionCreate.bind(this));
            const connectionRemoveDisposer  = this.model.on("connection.remove", this.onConnectionRemove.bind(this));
            const stepOutPortCreateDisposer = this.model.on("step.outPort.create", this.onOutputPortCreate.bind(this));
            const stepOutPortRemoveDisposer = this.model.on("step.outPort.remove", this.onOutputPortRemove.bind(this));

            this.disposers.push(() => {
                stepChangeDisposer.dispose();
                stepCreateDisposer.dispose();
                stepRemoveDisposer.dispose();
                inputCreateDisposer.dispose();
                inputRemoveDisposer.dispose();
                outputCreateDisposer.dispose();
                outputRemoveDisposer.dispose();
                stepInPortShowDisposer.dispose();
                stepInPortHideDisposer.dispose();
                connectionCreateDisposer.dispose();
                connectionRemoveDisposer.dispose();
                stepOutPortCreateDisposer.dispose();
                stepOutPortRemoveDisposer.dispose();
            });

            this.invokePlugins("afterModelChange");
        }

        this.clearCanvas();

        const nodes = [
            ...this.model.steps,
            ...this.model.inputs,
            ...this.model.outputs
        ].filter(n => n.isVisible);

        /**
         * If there is a missing sbg:x or sbg:y property on any node model,
         * graph should be arranged to avoid random placement.
         */
        let arrangeNecessary = false;

        let nodeTemplate = "";

        for (const node of nodes) {
            const patched  = GraphNode.patchModelPorts(node);
            const missingX = isNaN(parseInt(patched.customProps["sbg:x"], 10));
            const missingY = isNaN(parseInt(patched.customProps["sbg:y"], 10));

            if (missingX || missingY) {
                arrangeNecessary = true;
            }

            nodeTemplate += GraphNode.makeTemplate(patched);

        }

        this.workflow.innerHTML += nodeTemplate;

        this.redrawEdges();

        Array.from(this.workflow.querySelectorAll(".node")).forEach(e => {
            this.workflow.appendChild(e);
        });

        this.addEventListeners();

        this.workflow.setAttribute("transform", oldTransform!);

        this.scaleAtPoint(this.scale);


        this.invokePlugins("afterRender");
    }

    findParent(el: Element, parentClass = "node"): SVGGElement | undefined {
        let parentNode: Element | null = el;
        while (parentNode) {
            if (parentNode.classList.contains(parentClass)) {
                return parentNode as SVGGElement;
            }
            parentNode = parentNode.parentElement;
        }
        return undefined;
    }

    /**
     * Retrieves a plugin instance
     * @param {{new(...args: any[]) => T}} plugin
     * @returns {T}
     */
    getPlugin<T extends SVGPlugin>(plugin: { new(...args: any[]): T }): T {
        return this.plugins.find(p => p instanceof plugin) as T;
    }

    on(event: string, handler: any) {
        this.eventHub.on(event, handler);
    }

    off(event: string, handler: any) {
        this.eventHub.off(event, handler);
    }

    /**
     * Scales the workflow to fit the available viewport
     */
    fitToViewport(ignoreScaleLimits = false): void {

        this.scaleAtPoint(1);

        Object.assign(this.workflow.transform.baseVal.getItem(0).matrix, {
            e: 0,
            f: 0
        });

        const clientBounds = this.svgRoot.getBoundingClientRect();
        const wfBounds     = this.workflow.getBoundingClientRect();
        const padding    = 100;

        if (clientBounds.width === 0 || clientBounds.height === 0) {
            throw new Error("Cannot fit workflow to the area that has no visible viewport.");
        }

        const verticalScale   = (wfBounds.height) / (clientBounds.height - padding);
        const horizontalScale = (wfBounds.width) / (clientBounds.width - padding);

        const scaleFactor = Math.max(verticalScale, horizontalScale);

        // Cap the upscaling to 1, we don't want to zoom in workflows that would fit anyway
        let newScale = Math.min(this.scale / scaleFactor, 1);

        if (!ignoreScaleLimits) {
            newScale = Math.max(newScale, this.minScale);
        }

        this.scaleAtPoint(newScale);

        const scaledWFBounds = this.workflow.getBoundingClientRect();

        const moveY = clientBounds.top - scaledWFBounds.top + Math.abs(clientBounds.height - scaledWFBounds.height) / 2;
        const moveX = clientBounds.left - scaledWFBounds.left + Math.abs(clientBounds.width - scaledWFBounds.width) / 2;

        const matrix = this.workflow.transform.baseVal.getItem(0).matrix;
        matrix.e += moveX;
        matrix.f += moveY;
    }

    redrawEdges() {

        const highlightedEdges = new Set();

        Array.from(this.workflow.querySelectorAll(".edge")).forEach((el) => {
            if (el.classList.contains("highlighted")) {
                const edgeID = el.attributes["data-source-connection"].value + el.attributes["data-destination-connection"].value;
                highlightedEdges.add(edgeID);
            }
            el.remove();
        });


        const edgesTpl = this.model.connections
            .map(c => {
                const edgeId     = c.source.id + c.destination.id;
                const edgeStates = highlightedEdges.has(edgeId) ? "highlighted" : "";
                return GraphEdge.makeTemplate(c, this.workflow, edgeStates);
            })
            .reduce((acc, tpl) => acc! + tpl, "");

        this.workflow.innerHTML = edgesTpl + this.workflow.innerHTML;
    }

    /**
     * Scale the workflow by the scaleCoefficient (not compounded) over given coordinates
     */
    scaleAtPoint(scale = 1, x = 0, y = 0): void {

        this.docScale     = scale;
        this.labelScale = 1 + (1 - this.docScale) / (this.docScale * 2);

        const transform         = this.workflow.transform.baseVal;
        const matrix: SVGMatrix = transform.getItem(0).matrix;

        const coords = this.transformScreenCTMtoCanvas(x, y);

        matrix.e += matrix.a * coords.x;
        matrix.f += matrix.a * coords.y;
        matrix.a = matrix.d = scale;
        matrix.e -= scale * coords.x;
        matrix.f -= scale * coords.y;

        const nodeLabels: any = this.workflow.querySelectorAll(".node .label") as  NodeListOf<SVGPathElement>;

        for (const el of nodeLabels) {
            const matrix = el.transform.baseVal.getItem(0).matrix;

            Object.assign(matrix, {
                a: this.labelScale,
                d: this.labelScale
            });
        }

    }

    transformScreenCTMtoCanvas(x: any, y: any) {
        const svg   = this.svgRoot;
        const ctm   = this.workflow.getScreenCTM()!;
        const point = svg.createSVGPoint();
        point.x     = x;
        point.y     = y;

        const t = point.matrixTransform(ctm.inverse());
        return {
            x: t.x,
            y: t.y
        };
    }

    enableEditing(enabled: boolean): void {
        this.invokePlugins("onEditableStateChange", enabled);
        this.editingEnabled = enabled;
    }

    // noinspection JSUnusedGlobalSymbols
    destroy() {

        this.svgRoot.classList.remove(this.svgID);

        this.clearCanvas();
        this.eventHub.empty();

        this.invokePlugins("destroy");

        for (const dispose of this.disposers) {
            dispose();
        }

        this.isDestroyed = true;
    }

    resetTransform() {
        this.workflow.setAttribute("transform", "matrix(1,0,0,1,0,0)");
        this.scaleAtPoint();
    }

    private assertNotDestroyed(method: string) {
        if (this.isDestroyed) {
            throw new Error("Cannot call the " + method + " method on a destroyed graph. " +
                "Destroying this object removes DOM listeners, " +
                "and reusing it would result in unexpected things not working. " +
                "Instead, you can just call the “draw” method with a different model, " +
                "or create a new Workflow object.");

        }
    }

    private addEventListeners(): void {


        /**
         * Attach canvas panning
         */
        {
            let pane: SVGGElement | undefined;
            let x = 0;
            let y = 0;
            let matrix: SVGMatrix | undefined;
            this.domEvents.drag(".pan-handle", (dx, dy) => {

                matrix!.e = x + dx;
                matrix!.f = y + dy;

            }, (ev, el, root) => {
                pane   = root!.querySelector(".workflow") as SVGGElement;
                matrix = pane.transform.baseVal.getItem(0).matrix;
                x      = matrix.e;
                y      = matrix.f;
            }, () => {
                pane   = undefined;
                matrix = undefined;
            });
        }

        /**
         * On mouse over node, bring it to the front
         */
        this.domEvents.on("mouseover", ".node", (ev, target, root) => {
            if (this.workflow.querySelector(".edge.dragged")) {
                return;
            }
            target!.parentElement!.appendChild(target!);
        });

    }

    private clearCanvas() {
        this.domEvents.detachAll();
        this.workflow.innerHTML = "";
        this.workflow.setAttribute("transform", "matrix(1,0,0,1,0,0)");
        this.workflow.setAttribute("class", "workflow");
    }

    private hookPlugins() {

        this.plugins.forEach(plugin => {

            plugin.registerOnBeforeChange!(event => {
                this.eventHub.emit("beforeChange", event);
            });

            plugin.registerOnAfterChange!(event => {
                this.eventHub.emit("afterChange", event);
            });

            plugin.registerOnAfterRender!(event => {
                this.eventHub.emit("afterRender", event);
            });
        });
    }

    private invokePlugins(methodName: keyof SVGPlugin, ...args: any[]) {
        this.plugins.forEach(plugin => {
            if (typeof plugin[methodName] === "function") {
                (plugin[methodName] as Function)(...args);
            }
        });
    }

    /**
     * Listener for “connection.create” event on model that renders new edges on canvas
     */
    private onConnectionCreate(source: Connectable, destination: Connectable): void {

        if (!source.isVisible || !destination.isVisible) {
            return;
        }

        const sourceID      = source.connectionId;
        const destinationID = destination.connectionId;

        GraphEdge.spawnBetweenConnectionIDs(this.workflow, sourceID, destinationID);
    }

    /**
     * Listener for "connection.remove" event on the model that disconnects nodes
     */
    private onConnectionRemove(source: Connectable, destination: Connectable): void {
        if (!source.isVisible || !destination.isVisible) {
            return;
        }

        const sourceID      = source.connectionId;
        const destinationID = destination.connectionId;

        const edge = this.svgRoot.querySelector(`.edge[data-source-connection="${sourceID}"][data-destination-connection="${destinationID}"`);
        edge!.remove();
    }

    /**
     * Listener for “input.create” event on model that renders workflow inputs
     */
    private onInputCreate(input: WorkflowInputParameterModel): void {
        if (!input.isVisible) {
            return;
        }

        const patched       = GraphNode.patchModelPorts(input);
        const graphTemplate = GraphNode.makeTemplate(patched, this.labelScale);

        const el = TemplateParser.parse(graphTemplate)!;
        this.workflow.appendChild(el);

    }

    /**
     * Listener for “output.create” event on model that renders workflow outputs
     */
    private onOutputCreate(output: WorkflowOutputParameterModel): void {

        if (!output.isVisible) {
            return;
        }

        const patched       = GraphNode.patchModelPorts(output);
        const graphTemplate = GraphNode.makeTemplate(patched, this.labelScale);

        const el = TemplateParser.parse(graphTemplate)!;
        this.workflow.appendChild(el);
    }

    private onStepCreate(step: StepModel) {
        // if the step doesn't have x & y coordinates, check if they are in the run property
        if (!step.customProps["sbg:x"] && step.run.customProps && step.run.customProps["sbg:x"]) {

            Object.assign(step.customProps, {
                "sbg:x": step.run.customProps["sbg:x"],
                "sbg:y": step.run.customProps["sbg:y"]
            });

            // remove them from the run property once finished
            delete step.run.customProps["sbg:x"];
            delete step.run.customProps["sbg:y"];
        }

        const template = GraphNode.makeTemplate(step, this.labelScale);
        const element  = TemplateParser.parse(template)!;
        this.workflow.appendChild(element);
    }


    private onStepChange(change: StepModel) {
        const title = this.workflow.querySelector(`.step[data-id="${change.connectionId}"] .title`) as SVGTextElement;
        if (title) {
            title.textContent = change.label;
        }
    }

    private onInputPortShow(input: WorkflowStepInputModel) {

        const stepEl = this.svgRoot.querySelector(`.step[data-connection-id="${input.parentStep.connectionId}"]`) as SVGElement;
        new StepNode(stepEl, input.parentStep).update();
    }

    private onInputPortHide(input: WorkflowStepInputModel) {
        const stepEl = this.svgRoot.querySelector(`.step[data-connection-id="${input.parentStep.connectionId}"]`) as SVGElement;
        new StepNode(stepEl, input.parentStep).update();
    }

    private onOutputPortCreate(output: WorkflowStepOutputModel) {
        const stepEl = this.svgRoot.querySelector(`.step[data-connection-id="${output.parentStep.connectionId}"]`) as SVGElement;
        new StepNode(stepEl, output.parentStep).update();
    }

    private onOutputPortRemove(output: WorkflowStepOutputModel) {
        const stepEl = this.svgRoot.querySelector(`.step[data-connection-id="${output.parentStep.connectionId}"]`) as SVGElement;
        new StepNode(stepEl, output.parentStep).update();
    }

    /**
     * Listener for "step.remove" event on model which removes steps
     */
    private onStepRemove(step: StepModel) {
        const stepEl = this.svgRoot.querySelector(`.step[data-connection-id="${step.connectionId}"]`) as SVGElement;
        stepEl.remove();
    }

    /**
     * Listener for "input.remove" event on model which removes inputs
     */
    private onInputRemove(input: WorkflowInputParameterModel) {
        if (!input.isVisible) {
            return;
        }
        const inputEl = this.svgRoot.querySelector(`.node.input[data-connection-id="${input.connectionId}"]`);
        inputEl!.remove();
    }

    /**
     * Listener for "output.remove" event on model which removes outputs
     */
    private onOutputRemove(output: WorkflowOutputParameterModel) {
        if (!output.isVisible) {
            return;
        }
        const outputEl = this.svgRoot.querySelector(`.node.output[data-connection-id="${output.connectionId}"]`);
        outputEl!.remove();
    }

    private makeID(length = 6) {
        let output    = "";
        const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

        for (let i = 0; i < length; i++) {
            output += charset.charAt(Math.floor(Math.random() * charset.length));
        }

        return output;
    }
}