export type Entry = {
    timestamp: number;

    upload?: number;
    download?: number;

    highlight?: boolean;
}

export type Style = {
    background_color: string;

    separator_color: string;
    separator_count: number;
    separator_width: number;

    upload: {
        fill: string;
        stroke: string;
        strike_width: number;
    },
    download: {
        fill: string;
        stroke: string;
        strike_width: number;
    }
}

export type TimeSpan = {
    origin: {
        begin: number;
        end: number;
        time: number;
    },
    target: {
        begin: number;
        end: number;
        time: number;
    }
}

/* Great explanation of Bezier curves: http://en.wikipedia.org/wiki/Bezier_curve#Quadratic_curves
 *
 * Assuming A was the last point in the line plotted and B is the new point,
 * we draw a curve with control points P and Q as below.
 *
 * A---P
 *     |
 *     |
 *     |
 *     Q---B
 *
 * Importantly, A and P are at the same y coordinate, as are B and Q. This is
 * so adjacent curves appear to flow as one.
 */
export class Graph {
    private static _loops: (() => any)[] = [];

    readonly canvas: HTMLCanvasElement;
    public style: Style = {
        background_color: "#28292b",
        //background_color: "red",

        separator_color: "#283036",
        //separator_color: 'blue',
        separator_count: 10,
        separator_width: 1,


        upload: {
            fill: "#2d3f4d",
            stroke: "#336e9f",
            strike_width: 2,
        },

        download: {
            fill: "#532c26",
            stroke: "#a9321c",
            strike_width: 2,
        }
    };

    private _canvas_context: CanvasRenderingContext2D;
    private _entries: Entry[] = [];
    private _entry_max = {
        upload: 1,
        download: 1,
    };
    private _max_space = 1.12;
    private _max_gap = 5;
    private _listener_mouse_move;
    private _listener_mouse_out;
    private _animate_loop;

    _time_span: TimeSpan = {
        origin: {
            begin: 0,
            end: 1,
            time: 0
        },
        target: {
            begin: 0,
            end: 1,
            time: 1
        }
    };

    private _detailed_shown = false;
    callback_detailed_info: (upload: number, download: number, timestamp: number, event: MouseEvent) => any;
    callback_detailed_hide: () => any;

    constructor(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        this._animate_loop = () => this.draw();
        this.recalculate_cache(); /* initialize cache */
    }

    initialize() {
        this._canvas_context = this.canvas.getContext("2d");

        Graph._loops.push(this._animate_loop);
        if(Graph._loops.length == 1) {
            const static_loop = () => {
                Graph._loops.forEach(l => l());
                if(Graph._loops.length > 0)
                    requestAnimationFrame(static_loop);
                else
                    console.log("STATIC terminate!");
            };
            static_loop();
        }

        this.canvas.onmousemove = this.on_mouse_move.bind(this);
        this.canvas.onmouseleave = this.on_mouse_leave.bind(this);
    }

    terminate() {
        Graph._loops.remove(this._animate_loop);
    }

    max_gap_size(value?: number) : number { return typeof(value) === "number" ? (this._max_gap = value) : this._max_gap; }

    private recalculate_cache(time_span?: boolean) {
        this._entries = this._entries.sort((a, b) => a.timestamp - b.timestamp);
        this._entry_max = {
            download: 1,
            upload: 1
        };
        if(time_span) {
            this._time_span = {
                origin: {
                    begin: 0,
                    end: 0,
                    time: 0
                },
                target: {
                    begin: this._entries.length > 0 ? this._entries[0].timestamp : 0,
                    end: this._entries.length > 0 ? this._entries.last().timestamp : 0,
                    time: 0
                }
            };
        }

        for(const entry of this._entries) {
            if(typeof(entry.upload) === "number")
                this._entry_max.upload = Math.max(this._entry_max.upload, entry.upload);

            if(typeof(entry.download) === "number")
                this._entry_max.download = Math.max(this._entry_max.download, entry.download);
        }

        this._entry_max.upload *= this._max_space;
        this._entry_max.download *= this._max_space;
    }

    insert_entry(entry: Entry) {
        if(this._entries.length > 0 && entry.timestamp < this._entries.last().timestamp)
            throw "invalid timestamp";

        this._entries.push(entry);

        if(typeof(entry.upload) === "number")
            this._entry_max.upload = Math.max(this._entry_max.upload, entry.upload * this._max_space);

        if(typeof(entry.download) === "number")
            this._entry_max.download = Math.max(this._entry_max.download, entry.download * this._max_space);
    }

    insert_entries(entries: Entry[]) {
        this._entries.push(...entries);
        this.recalculate_cache();
        this.cleanup();
    }

    resize() {
        this.canvas.style.height = "100%";
        this.canvas.style.width = "100%";
        const cstyle = getComputedStyle(this.canvas);

        this.canvas.width = parseInt(cstyle.width);
        this.canvas.height = parseInt(cstyle.height);
    }

    cleanup() {
        const time = this.calculate_time_span();

        let index = 0;
        for(;index < this._entries.length; index++) {
            if(this._entries[index].timestamp < time.begin)
                continue;

            if(index == 0)
                return;
            break;
        }

        /* keep the last entry as a reference point to the left */
        if(index > 1) {
            this._entries.splice(0, index - 1);
            this.recalculate_cache();
        }
    }

    calculate_time_span() : { begin: number; end: number } {
        const time = Date.now();
        if(time >= this._time_span.target.time)
            return this._time_span.target;

        if(time <= this._time_span.origin.time)
            return this._time_span.origin;

        const ob = this._time_span.origin.begin;
        const oe = this._time_span.origin.end;
        const ot = this._time_span.origin.time;

        const tb = this._time_span.target.begin;
        const te = this._time_span.target.end;
        const tt = this._time_span.target.time;

        const offset = (time - ot) / (tt - ot);
        return {
            begin: ob + (tb - ob) * offset,
            end: oe + (te - oe) * offset,
        };
    }

    draw() {
        let ctx = this._canvas_context;

        const height = this.canvas.height;
        const width = this.canvas.width;

        //console.log("Painting on %ox%o", height, width);

        ctx.shadowBlur = 0;
        ctx.filter = "";
        ctx.lineCap = "square";

        ctx.fillStyle = this.style.background_color;
        ctx.fillRect(0, 0, width, height);

        /* first of all print the separators */
        {
            const sw = this.style.separator_width;
            const swh = this.style.separator_width / 2;

            ctx.lineWidth = sw;
            ctx.strokeStyle = this.style.separator_color;

            ctx.beginPath();
            /* horizontal */
            {
                const dw = width / this.style.separator_count;
                let dx = dw / 2;
                while(dx < width) {
                    ctx.moveTo(Math.floor(dx - swh) + .5, .5);
                    ctx.lineTo(Math.floor(dx - swh) + .5, Math.floor(height) + .5);
                    dx += dw;
                }
            }

            /* vertical */
            {
                const dh = height / 3; //tree lines (top, center, bottom)

                let dy = dh / 2;
                while(dy < height) {
                    ctx.moveTo(.5, Math.floor(dy - swh) + .5);
                    ctx.lineTo(Math.floor(width) + .5, Math.floor(dy - swh) + .5);
                    dy += dh;
                }
            }
            ctx.stroke();
            ctx.closePath();
        }

        /* draw the lines */
        {
            const t = this.calculate_time_span();
            const tb = t.begin; /* time begin */
            const dt = t.end - t.begin; /* delta time */
            const dtw = width / dt; /* delta time width */

            const draw_graph = (type: "upload" | "download", direction: number, max: number) => {
                const hy = Math.floor(height / 2); /* half y */
                const by = hy - direction * this.style[type].strike_width; /* the "base" line */

                const marked_points: ({x: number, y: number})[] = [];

                ctx.beginPath();
                ctx.moveTo(0, by);

                let x, y, lx = 0, ly = by; /* last x, last y */

                const floor = a => a; //Math.floor;
                for(const entry of this._entries) {
                    x = floor((entry.timestamp - tb) * dtw);
                    if(typeof entry[type] === "number")
                        y = floor(hy - direction * Math.max(hy * (entry[type] / max), this.style[type].strike_width));
                    else
                        y = hy - direction * this.style[type].strike_width;

                    if(entry.timestamp < tb) {
                        lx = x;
                        ly = y;

                        continue;
                    }

                    if(x - lx > this._max_gap && this._max_gap > 0) {
                        ctx.lineTo(lx, by);
                        ctx.lineTo(x, by);
                        ctx.lineTo(x, y);

                        lx = x;
                        ly = y;
                        continue;
                    }

                    ctx.bezierCurveTo((x + lx) / 2, ly, (x + lx) / 2, y, x, y);
                    if(entry.highlight)
                        marked_points.push({x: x, y: y});

                    lx = x;
                    ly = y;
                }

                ctx.strokeStyle = this.style[type].stroke;
                ctx.lineWidth = this.style[type].strike_width;
                ctx.lineJoin = "miter";
                ctx.stroke();

                //Close the path and fill
                ctx.lineTo(width, hy);
                ctx.lineTo(0, hy);

                ctx.fillStyle = this.style[type].fill;
                ctx.fill();

                ctx.closePath();

                {
                    ctx.beginPath();
                    const radius = 3;
                    for(const point of marked_points) {
                        ctx.moveTo(point.x, point.y);
                        ctx.ellipse(point.x, point.y, radius, radius, 0, 0, 2 * Math.PI, false);

                    }
                    ctx.stroke();
                    ctx.fill();

                    ctx.closePath();
                }
            };

            const shared_max = Math.max(this._entry_max.upload, this._entry_max.download);
            draw_graph("upload", 1, shared_max);
            draw_graph("download", -1, shared_max);
        }
    }

    private on_mouse_move(event: MouseEvent) {
        const offset = event.offsetX;
        const max_offset = this.canvas.width;

        if(offset < 0) return;
        if(offset > max_offset) return;

        const time_span = this.calculate_time_span();
        const time = time_span.begin + (time_span.end - time_span.begin) * (offset / max_offset);
        let index = 0;
        for(;index < this._entries.length; index++) {
            if(this._entries[index].timestamp > time)
                break;
        }

        const entry_before = this._entries[index - 1]; /* In JS negative array access is allowed and returns undefined */
        const entry_next = this._entries[index]; /* In JS negative array access is allowed and returns undefined */
        let entry: Entry;
        if(!entry_before || !entry_next) {
            entry = entry_before || entry_next;
        } else {
            const dn = entry_next.timestamp - time;
            const db = time - entry_before.timestamp;
            if(dn > db)
                entry = entry_before;
            else
                entry = entry_next;
        }

        if(!entry) {
            this.on_mouse_leave(event);
        } else {
            this._entries.forEach(e => e.highlight = false);
            this._detailed_shown = true;
            entry.highlight = true;

            if(this.callback_detailed_info)
                this.callback_detailed_info(entry.upload, entry.download, entry.timestamp, event);
        }

    }

    private on_mouse_leave(event: MouseEvent) {
        if(!this._detailed_shown) return;
        this._detailed_shown = false;

        this._entries.forEach(e => e.highlight = false);
        if(this.callback_detailed_hide)
            this.callback_detailed_hide();
    }
}