MapComplete/Utils.ts

import * as colors from "./assets/colors.json"

export class Utils {

    /**
     * In the 'deploy'-step, some code needs to be run by ts-node.
     * However, ts-node crashes when it sees 'document'. When running from console, we flag this and disable all code where document is needed.
     * This is a workaround and yet another hack
     */
    public static runningFromConsole = typeof window === "undefined";
    public static readonly assets_path = "./assets/svg/";
    public static externalDownloadFunction: (url: string, headers?: any) => Promise<any>;
    public static Special_visualizations_tagsToApplyHelpText = `These can either be a tag to add, such as \`amenity=fast_food\` or can use a substitution, e.g. \`addr:housenumber=$number\`. 
This new point will then have the tags \`amenity=fast_food\` and \`addr:housenumber\` with the value that was saved in \`number\` in the original feature. 

If a value to substitute is undefined, empty string will be used instead.

This supports multiple values, e.g. \`ref=$source:geometry:type/$source:geometry:ref\`

Remark that the syntax is slightly different then expected; it uses '$' to note a value to copy, followed by a name (matched with \`[a-zA-Z0-9_:]*\`). Sadly, delimiting with \`{}\` as these already mark the boundaries of the special rendering...

Note that these values can be prepare with javascript in the theme by using a [calculatedTag](calculatedTags.md#calculating-tags-with-javascript)
 `
    public static readonly imageExtensions = new Set(["jpg", "png", "svg", "jpeg", ".gif"])

    public static readonly special_visualizations_importRequirementDocs = `#### Importing a dataset into OpenStreetMap: requirements

If you want to import a dataset, make sure that:

1. The dataset to import has a suitable license
2. The community has been informed of the import
3. All other requirements of the [import guidelines](https://wiki.openstreetmap.org/wiki/Import/Guidelines) have been followed

There are also some technicalities in your theme to keep in mind:

1. The new feature will be added and will flow through the program as any other new point as if it came from OSM.
    This means that there should be a layer which will match the new tags and which will display it.
2. The original feature from your geojson layer will gain the tag '_imported=yes'.
    This should be used to change the appearance or even to hide it (eg by changing the icon size to zero)
3. There should be a way for the theme to detect previously imported points, even after reloading.
    A reference number to the original dataset is an excellent way to do this
4. When importing ways, the theme creator is also responsible of avoiding overlapping ways. 
    
#### Disabled in unofficial themes

The import button can be tested in an unofficial theme by adding \`test=true\` or \`backend=osm-test\` as [URL-paramter](URL_Parameters.md). 
The import button will show up then. If in testmode, you can read the changeset-XML directly in the web console.
In the case that MapComplete is pointed to the testing grounds, the edit will be made on https://master.apis.dev.openstreetmap.org`
    private static knownKeys = ["addExtraTags", "and", "calculatedTags", "changesetmessage", "clustering", "color", "condition", "customCss", "dashArray", "defaultBackgroundId", "description", "descriptionTail", "doNotDownload", "enableAddNewPoints", "enableBackgroundLayerSelection", "enableGeolocation", "enableLayers", "enableMoreQuests", "enableSearch", "enableShareScreen", "enableUserBadge", "freeform", "hideFromOverview", "hideInAnswer", "icon", "iconOverlays", "iconSize", "id", "if", "ifnot", "isShown", "key", "language", "layers", "lockLocation", "maintainer", "mappings", "maxzoom", "maxZoom", "minNeededElements", "minzoom", "multiAnswer", "name", "or", "osmTags", "passAllFeatures", "presets", "question", "render", "roaming", "roamingRenderings", "rotation", "shortDescription", "socialImage", "source", "startLat", "startLon", "startZoom", "tagRenderings", "tags", "then", "title", "titleIcons", "type", "version", "wayHandling", "widenFactor", "width"]
    private static extraKeys = ["nl", "en", "fr", "de", "pt", "es", "name", "phone", "email", "amenity", "leisure", "highway", "building", "yes", "no", "true", "false"]
    private static injectedDownloads = {}
    private static _download_cache = new Map<string, { promise: Promise<any>, timestamp: number }>()

    /**
     * Parses the arguments for special visualisations
     */
    public static ParseVisArgs(specs: { name: string, defaultValue?: string }[], args: string[]): any {
        const parsed = {};
        if (args.length > specs.length) {
            throw "To much arguments for special visualization: got " + args.join(",") + " but expected only " + args.length + " arguments"
        }
        for (let i = 0; i < specs.length; i++) {
            const spec = specs[i];
            let arg = args[i]?.trim();
            if (arg === undefined || arg === "") {
                arg = spec.defaultValue
            }
            parsed[spec.name] = arg
        }

        return parsed;
    }

    static EncodeXmlValue(str) {
        if (typeof str !== "string") {
            str = "" + str
        }

        return str.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&apos;')
    }

    /**
     * Gives a clean float, or undefined if parsing fails
     * @param str
     */
    static asFloat(str): number {
        if (str) {
            const i = parseFloat(str);
            if (isNaN(i)) {
                return undefined;
            }
            return i;
        }
        return undefined;
    }

    public static Upper(str: string) {
        return str.substr(0, 1).toUpperCase() + str.substr(1);
    }

    public static TwoDigits(i: number) {
        if (i < 10) {
            return "0" + i;
        }
        return "" + i;
    }

    /**
     * Converts a number to a string with one number after the comma
     *
     * Utils.Round(15) // => "15.0"
     * Utils.Round(1) // => "1.0"
     * Utils.Round(1.5) // => "1.5"
     * Utils.Round(0.5) // => "0.5"
     * Utils.Round(1.6) // => "1.6"
     * Utils.Round(-15) // => "-15.0"
     * Utils.Round(-1) // => "-1.0"
     * Utils.Round(-1.5) // => "-1.5"
     * Utils.Round(-0.5) // => "-0.5"
     * Utils.Round(-1.6) // => "-1.6"
     * Utils.Round(-1531.63543) // =>"-1531.6"
     */
    public static Round(i: number): string {
        if (i < 0) {
            return "-" + Utils.Round(-i);
        }
        const j = "" + Math.floor(i * 10);
        if (j.length == 1) {
            return "0." + j;
        }
        return j.substr(0, j.length - 1) + "." + j.substr(j.length - 1, j.length);
    }

    public static Times(f: ((i: number) => string), count: number): string {
        let res = "";
        for (let i = 0; i < count; i++) {
            res += f(i);
        }
        return res;
    }

    public static TimesT<T>(count: number, f: ((i: number) => T)): T[] {
        let res: T[] = [];
        for (let i = 0; i < count; i++) {
            res.push(f(i));
        }
        return res;
    }

    public static NoNull<T>(array: T[]): T[] {
        return array?.filter(o => o !== undefined && o !== null)
    }

    public static Hist(array: string[]): Map<string, number> {
        const hist = new Map<string, number>();
        for (const s of array) {
            hist.set(s, 1 + (hist.get(s) ?? 0))
        }
        return hist;
    }

    public static NoEmpty(array: string[]): string[] {
        const ls: string[] = [];
        for (const t of array) {
            if (t === "") {
                continue;
            }
            ls.push(t);
        }
        return ls;
    }

    public static EllipsesAfter(str: string, l: number = 100) {
        if (str === undefined || str === null) {
            return undefined;
        }
        if (str.length <= l) {
            return str;
        }
        return str.substr(0, l - 3) + "...";
    }

    public static FixedLength(str: string, l: number) {
        str = Utils.EllipsesAfter(str, l)
        while (str.length < l) {
            str = " " + str
        }
        return str;
    }

    public static Dedup(arr: string[]): string[] {
        if (arr === undefined) {
            return undefined;
        }
        const newArr = [];
        for (const string of arr) {
            if (newArr.indexOf(string) < 0) {
                newArr.push(string);
            }
        }
        return newArr;
    }

    public static Dupiclates(arr: string[]): string[] {
        if (arr === undefined) {
            return undefined;
        }
        const newArr = [];
        const seen = new Set<string>();
        for (const string of arr) {
            if (seen.has(string)) {
                newArr.push(string)
            }
            seen.add(string)
        }
        return newArr;
    }

    /**
     * In the given list, all values which are lists will be merged with the values, e.g.
     *
     * Utils.Flatten([ [1,2], 3, [4, [5 ,6]] ]) // => [1, 2, 3, 4, [5, 6]]
     */
    public static Flatten<T>(list: (T | T[])[]): T[] {
        const result = []
        for (const value of list) {
            if (Array.isArray(value)) {
                result.push(...value)
            } else {
                result.push(value)
            }
        }
        return result;
    }

    /**
     * Utils.Identical([1,2], [1,2]) // => true
     * Utils.Identical([1,2,3], [1,2,4}]) // => false
     * Utils.Identical([1,2], [1,2,3]) // => false
     */
    public static Identical<T>(t1: T[], t2: T[], eq?: (t: T, t0: T) => boolean): boolean {
        if (t1.length !== t2.length) {
            return false
        }
        eq = (a, b) => a === b
        for (let i = 0; i < t1.length; i++) {
            if (!eq(t1[i], t2[i])) {
                return false
            }
        }
        return true;
    }

    /**
     * Utils.MergeTags({k0:"v0","common":"0"},{k1:"v1", common: "1"}) // => {k0: "v0", k1:"v1", common: "1"}
     */
    public static MergeTags(a: any, b: any) {
        const t = {};
        for (const k in a) {
            t[k] = a[k];
        }
        for (const k in b) {
            t[k] = b[k];
        }
        return t;
    }

    public static SplitFirst(a: string, sep: string): string[] {
        const index = a.indexOf(sep);
        if (index < 0) {
            return [a];
        }
        return [a.substr(0, index), a.substr(index + sep.length)];
    }

    /**
     * Given a piece of text, will replace any key occuring in 'tags' by the corresponding value
     * @param txt
     * @param tags
     * @param useLang
     * @constructor
     */
    public static SubstituteKeys(txt: string | undefined, tags: any, useLang?: string): string | undefined {
        if (txt === undefined) {
            return undefined
        }
        const regex = /.*{([^}]*)}.*/

        let match = txt.match(regex)

        while (match) {
            const key = match[1]
            let v = tags[key]
            if (v !== undefined) {

                if (v["toISOString"] != undefined) {
                    // This is a date, probably the timestamp of the object
                    // @ts-ignore
                    const date: Date = el;
                    v = date.toISOString()
                }

                if (useLang !== undefined && v?.translations !== undefined) {
                    v = v.translations[useLang] ?? v.translations["*"] ?? (v.textFor !== undefined ? v.textFor(useLang) : v);
                }

                if (v.InnerConstructElement !== undefined) {
                    console.warn("SubstituteKeys received a BaseUIElement to substitute in - this is probably a bug and will be downcast to a string\nThe key is", key, "\nThe value is", v)
                    v = (<HTMLElement>v.InnerConstructElement())?.innerText
                }

                if (typeof v !== "string") {
                    v = "" + v
                }
                v = v.replace(/\n/g, "<br/>")
            } else {
                // v === undefined 
                v = ""
            }
            txt = txt.replace("{" + key + "}", v)
            match = txt.match(regex)
        }

        return txt;
    }

    public static LoadCustomCss(location: string) {
        const head = document.getElementsByTagName('head')[0];
        const link = document.createElement('link');
        link.id = "customCss";
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = location;
        link.media = 'all';
        head.appendChild(link);
        console.log("Added custom css file ", location)
    }

    /**
     * Copies all key-value pairs of the source into the target. This will change the target
     * If the key starts with a '+', the values of the list will be appended to the target instead of overwritten
     *
     * const obj = {someValue: 42};
     * const override = {someValue: null};
     * Utils.Merge(override, obj);
     * obj.someValue // => null
     *
     * const obj = {someValue: 42};
     * const override = {someValue: null};
     * const returned = Utils.Merge(override, obj);
     * returned == obj // => true
     *
     *  const source = {
     *                abc: "def",
     *                foo: "bar",
     *                list0: ["overwritten"],
     *                "list1+": ["appended"]
     *            }
     * const target = {
     *                "xyz": "omega",
     *                "list0": ["should-be-gone"],
     *                "list1": ["should-be-kept"],
     *                "list2": ["should-be-untouched"]
     *            }
     * const result = Utils.Merge(source, target)
     * result.abc // => "def"
     * result.foo // => "bar"
     * result.xyz // => "omega"
     * result.list0.length // =>  1
     * result.list0[0] // =>  "overwritten"
     * result.list1.length // =>  2
     * result.list1[0] // =>  "should-be-kept"
     * result.list1[1] // =>  "appended"
     * result.list2.length // =>  1
     * result.list2[0] // => "should-be-untouched"
     */
    static Merge<T, S>(source: S, target: T): (T & S) {
        if (target === null) {
            return <T & S>source
        }

        for (const key in source) {
            if (!source.hasOwnProperty(key)) {
                continue
            }
            if (key.startsWith("=")) {
                const trimmedKey = key.substr(1);
                target[trimmedKey] = source[key]
                continue
            }

            if (key.startsWith("+") || key.endsWith("+")) {
                const trimmedKey = key.replace("+", "");
                const sourceV = source[key];
                const targetV = (target[trimmedKey] ?? [])

                let newList: any[];
                if (key.startsWith("+")) {
                    // @ts-ignore
                    newList = sourceV.concat(targetV)
                } else {
                    newList = targetV.concat(sourceV)
                }

                target[trimmedKey] = newList;
                continue;
            }

            const sourceV = source[key]
            // @ts-ignore
            const targetV = target[key]
            if (typeof sourceV === "object") {
                if (sourceV === null) {
                    // @ts-ignore
                    target[key] = null
                } else if (targetV === undefined) {
                    // @ts-ignore
                    target[key] = sourceV;
                } else {
                    Utils.Merge(sourceV, targetV);
                }

            } else {
                // @ts-ignore
                target[key] = sourceV;
            }

        }
        // @ts-ignore
        return target;
    }


    /**
     * Walks the specified path into the object till the end.
     *
     * If a list is encountered, this is tranparently walked recursively on every object.
     *
     * The leaf objects are replaced in the object itself by the specified function
     */
    public static WalkPath(path: string[], object: any, replaceLeaf: ((leaf: any, travelledPath: string[]) => any), travelledPath: string[] = []) {
        const head = path[0]
        if (path.length === 1) {
            // We have reached the leaf
            const leaf = object[head];
            if (leaf !== undefined) {
                if (Array.isArray(leaf)) {
                    object[head] = leaf.map(o => replaceLeaf(o, travelledPath))
                } else {
                    object[head] = replaceLeaf(leaf, travelledPath)
                }
            }
            return

        }
        const sub = object[head]
        if (sub === undefined) {
            return;
        }
        if (typeof sub !== "object") {
            return;
        }
        if (Array.isArray(sub)) {
            sub.forEach((el, i) => Utils.WalkPath(path.slice(1), el, replaceLeaf, [...travelledPath, head, "" + i]))
            return;
        }
        Utils.WalkPath(path.slice(1), sub, replaceLeaf, [...travelledPath, head])
    }

    /**
     * Walks the specified path into the object till the end.
     * If a list is encountered, this is tranparently walked recursively on every object.
     *
     * The leaf objects are collected in the list
     */
    public static CollectPath(path: string[], object: any, collectedList: { leaf: any, path: string[] }[] = [], travelledPath: string[] = []): { leaf: any, path: string[] }[] {
        if (object === undefined || object === null) {
            return collectedList;
        }
        const head = path[0]
        travelledPath = [...travelledPath, head]
        if (path.length === 1) {
            // We have reached the leaf
            const leaf = object[head];
            if (leaf === undefined || leaf === null) {
                return collectedList
            }
            if (Array.isArray(leaf)) {
                for (let i = 0; i < (<any[]>leaf).length; i++) {
                    const l = (<any[]>leaf)[i];
                    collectedList.push({leaf: l, path: [...travelledPath, "" + i]})
                }
            } else {
                collectedList.push({leaf, path: travelledPath})
            }
            return collectedList
        }
        const sub = object[head]
        if (sub === undefined || sub === null) {
            return collectedList;
        }

        if (Array.isArray(sub)) {
            sub.forEach((el, i) => Utils.CollectPath(path.slice(1), el, collectedList, [...travelledPath, "" + i]))
            return collectedList;
        }
        if (typeof sub !== "object") {
            return collectedList;
        }
        return Utils.CollectPath(path.slice(1), sub, collectedList, travelledPath)
    }

    /**
     * Apply a function on every leaf of the JSON; used to rewrite parts of the JSON.
     * Returns a modified copy of the original object.
     * 
     * Hangs if the object contains a loop
     */
    static WalkJson(json: any, f: (v: object | number | string | boolean | undefined, path: string[]) => any, isLeaf: (object) => boolean = undefined, path: string[] = []) {
        if (json === undefined) {
            return f(undefined, path)
        }
        const jtp = typeof json
        if (isLeaf !== undefined) {
            if (jtp === "object") {
                if (isLeaf(json)) {
                    return f(json, path)
                }
            } else {
                return json
            }
        } else if (jtp === "boolean" || jtp === "string" || jtp === "number") {
            return f(json, path)
        }
        if (Array.isArray(json)) {
            return json.map((sub,i) => {
                return Utils.WalkJson(sub, f, isLeaf, [...path,""+i]);
            })
        }

        const cp = {...json}
        for (const key in json) {
            cp[key] = Utils.WalkJson(json[key], f, isLeaf, [...path, key])
        }
        return cp
    }

    /**
     * Walks an object recursively, will execute the 'collect'-callback on every leaf.
     * 
     * Will hang on objects with loops
     */
    static WalkObject(json: any, collect: (v: number | string | boolean | undefined, path: string[]) => any, isLeaf: (object) => boolean = undefined, path = []): void {
        if (json === undefined) {
            return;
        }
        const jtp = typeof json
        if (isLeaf !== undefined) {
            if (jtp !== "object") {
                return
            }

            if (isLeaf(json)) {
                return collect(json, path)
            }
        } else if (jtp === "boolean" || jtp === "string" || jtp === "number") {
            collect(json, path)
            return
        }
        if (Array.isArray(json)) {
            json.map((sub, i) => {
                return Utils.WalkObject(sub, collect, isLeaf, [...path, i]);
            })
            return
        }

        for (const key in json) {
            Utils.WalkObject(json[key], collect, isLeaf, [...path, key])
        }
    }


    static getOrSetDefault<K, V>(dict: Map<K, V>, k: K, v: () => V) {
        let found = dict.get(k);
        if (found !== undefined) {
            return found;
        }
        dict.set(k, v());
        return dict.get(k);
    }

    /**
     * Tries to minify the given JSON by applying some compression
     */
    public static MinifyJSON(stringified: string): string {
        stringified = stringified.replace(/\|/g, "||");

        const keys = Utils.knownKeys.concat(Utils.extraKeys);
        for (let i = 0; i < keys.length; i++) {
            const knownKey = keys[i];
            let code = i;
            if (i >= 124) {
                code += 1; // Character 127 is our 'escape' character |
            }
            let replacement = "|" + String.fromCharCode(code)
            stringified = stringified.replace(new RegExp(`\"${knownKey}\":`, "g"), replacement);
        }

        return stringified;
    }

    public static UnMinify(minified: string): string {

        if (minified === undefined || minified === null) {
            return undefined;
        }

        const parts = minified.split("|");
        let result = parts.shift();
        const keys = Utils.knownKeys.concat(Utils.extraKeys);

        for (const part of parts) {
            if (part == "") {
                // Empty string => this was a || originally
                result += "|"
                continue
            }
            const i = part.charCodeAt(0);
            result += "\"" + keys[i] + "\":" + part.substring(1)
        }

        return result;
    }

    public static injectJsonDownloadForTests(url: string, data) {
        Utils.injectedDownloads[url] = data
    }

    public static download(url: string, headers?: any): Promise<string> {
        if (this.externalDownloadFunction !== undefined) {
            return this.externalDownloadFunction(url, headers)
        }

        return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.onload = () => {
                    if (xhr.status == 200) {
                        resolve(xhr.response)
                    } else if (xhr.status === 509 || xhr.status === 429) {
                        reject("rate limited")
                    } else {
                        reject(xhr.statusText)
                    }
                };
                xhr.open('GET', url);
                if (headers !== undefined) {

                    for (const key in headers) {
                        xhr.setRequestHeader(key, headers[key])
                    }
                }

                xhr.send();
                xhr.onerror = reject
            }
        )
    }

    public static upload(url: string, data, headers?: any): Promise<string> {

        return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.onload = () => {
                    if (xhr.status == 200) {
                        resolve(xhr.response)
                    } else if (xhr.status === 509 || xhr.status === 429) {
                        reject("rate limited")
                    } else {
                        reject(xhr.statusText)
                    }
                };
                xhr.open('POST', url);
                if (headers !== undefined) {

                    for (const key in headers) {
                        xhr.setRequestHeader(key, headers[key])
                    }
                }

                xhr.send(data);
                xhr.onerror = reject
            }
        )
    }


    public static async downloadJsonCached(url: string, maxCacheTimeMs: number, headers?: any): Promise<any> {
        const cached = Utils._download_cache.get(url)
        if (cached !== undefined) {
            if ((new Date().getTime() - cached.timestamp) <= maxCacheTimeMs) {
                return cached.promise
            }
        }
        const promise = /*NO AWAIT as we work with the promise directly */Utils.downloadJson(url, headers)
        Utils._download_cache.set(url, {promise, timestamp: new Date().getTime()})
        return await promise
    }

    public static async downloadJson(url: string, headers?: any): Promise<any> {
        const injected = Utils.injectedDownloads[url]
        if (injected !== undefined) {
            console.log("Using injected resource for test for URL", url)
            return new Promise((resolve, _) => resolve(injected))
        }
        const data = await Utils.download(url, Utils.Merge({"accept": "application/json"}, headers ?? {}))
        try {
            if (typeof data === "string") {
                return JSON.parse(data)
            }
            return data
        } catch (e) {
            console.error("Could not parse ", data, "due to", e, "\n", e.stack)
            throw e;
        }
    }

    /**
     * Triggers a 'download file' popup which will download the contents
     */
    public static offerContentsAsDownloadableFile(contents: string | Blob, fileName: string = "download.txt",
                                                  options?: { mimetype: string | "text/plain" | "text/csv" | "application/vnd.geo+json" | "{gpx=application/gpx+xml}" }) {
        const element = document.createElement("a");
        let file;
        if (typeof (contents) === "string") {
            file = new Blob([contents], {type: options?.mimetype ?? 'text/plain'});
        } else {
            file = contents;
        }
        element.href = URL.createObjectURL(file);
        element.download = fileName;
        document.body.appendChild(element); // Required for this to work in FireFox
        element.click();
    }

    public static ColourNameToHex(color: string): string {
        return colors[color.toLowerCase()] ?? color;
    }

    public static HexToColourName(hex: string): string {
        hex = hex.toLowerCase()
        if (!hex.startsWith("#")) {
            return hex;
        }
        const c = Utils.color(hex);

        let smallestDiff = Number.MAX_VALUE;
        let bestColor = undefined;
        for (const color in colors) {
            if (!colors.hasOwnProperty(color)) {
                continue;
            }
            const foundhex = colors[color];
            if (typeof foundhex !== "string") {
                continue
            }
            if (foundhex === hex) {
                return color
            }
            const diff = this.colorDiff(Utils.color(foundhex), c)
            if (diff > 50) {
                continue;
            }
            if (diff < smallestDiff) {
                smallestDiff = diff;
                bestColor = color;
            }
        }
        return bestColor ?? hex;
    }

    /**
     * Reorders an object: creates a new object where the keys have been added alphabetically
     *
     * const sorted = Utils.sortKeys({ x: 'x', abc: {'x': 'x', 'a': 'a'}, def: 'def'})
     * JSON.stringify(sorted) // => '{"abc":{"a":"a","x":"x"},"def":"def","x":"x"}'
     */
    static sortKeys(o: any) {
        const copy = {}
        let keys = Object.keys(o)
        keys = keys.sort()
        for (const key of keys) {
            let v = o[key]
            if (typeof v === "object") {
                v = Utils.sortKeys(v)
            }
            copy[key] = v
        }
        return copy
    }

    public static async waitFor(timeMillis: number): Promise<void> {
        return new Promise((resolve) => {
            window.setTimeout(resolve, timeMillis);
        })
    }

    public static toHumanTime(seconds): string {
        seconds = Math.floor(seconds)
        let minutes = Math.floor(seconds / 60)
        seconds = seconds % 60
        let hours = Math.floor(minutes / 60)
        minutes = minutes % 60
        let days = Math.floor(hours / 24)
        hours = hours % 24
        if (days > 0) {
            return days + "days" + " " + hours + "h"
        }
        return hours + ":" + Utils.TwoDigits(minutes) + ":" + Utils.TwoDigits(seconds)
    }

    public static DisableLongPresses() {
        // Remove all context event listeners on mobile to prevent long presses
        window.addEventListener('contextmenu', (e) => { // Not compatible with IE < 9

            if (e.target["nodeName"] === "INPUT") {
                return;
            }
            e.preventDefault();
            return false;
        }, false);

    }

    public static OsmChaLinkFor(daysInThePast, theme = undefined): string {
        const now = new Date()
        const lastWeek = new Date(now.getTime() - daysInThePast * 24 * 60 * 60 * 1000)
        const date = lastWeek.getFullYear() + "-" + Utils.TwoDigits(lastWeek.getMonth() + 1) + "-" + Utils.TwoDigits(lastWeek.getDate())
        let osmcha_link = `"date__gte":[{"label":"${date}","value":"${date}"}],"editor":[{"label":"mapcomplete","value":"mapcomplete"}]`
        if (theme !== undefined) {
            osmcha_link = osmcha_link + "," + `"comment":[{"label":"#${theme}","value":"#${theme}"}]`
        }
        return "https://osmcha.org/?filters=" + encodeURIComponent("{" + osmcha_link + "}")
    }

    /**
     * Deepclone an object by serializing and deserializing it
     * @param x
     * @constructor
     */
    static Clone<T>(x: T): T {
        if (x === undefined) {
            return undefined;
        }
        return JSON.parse(JSON.stringify(x));
    }

    public static ParseDate(str: string): Date {
        if (str.endsWith(" UTC")) {
            str = str.replace(" UTC", "+00")
        }
        return new Date(str)
    }

    public static sortedByLevenshteinDistance<T>(reference: string, ts: T[], getName: (t: T) => string): T[] {
        const withDistance: [T, number][] = ts.map(t => [t, Utils.levenshteinDistance(getName(t), reference)])
        withDistance.sort(([_, a], [__, b]) => a - b)
        return withDistance.map(n => n[0])
    }

    public static levenshteinDistance(str1: string, str2: string) {
        const track = Array(str2.length + 1).fill(null).map(() =>
            Array(str1.length + 1).fill(null));
        for (let i = 0; i <= str1.length; i += 1) {
            track[0][i] = i;
        }
        for (let j = 0; j <= str2.length; j += 1) {
            track[j][0] = j;
        }
        for (let j = 1; j <= str2.length; j += 1) {
            for (let i = 1; i <= str1.length; i += 1) {
                const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
                track[j][i] = Math.min(
                    track[j][i - 1] + 1, // deletion
                    track[j - 1][i] + 1, // insertion
                    track[j - 1][i - 1] + indicator, // substitution
                );
            }
        }
        return track[str2.length][str1.length];
    }

    public static MapToObj<T>(d: Map<string, T>, onValue: ((t: T, key: string) => any) = undefined): object {
        const o = {}
        d.forEach((value, key) => {
            if (onValue !== undefined) {
                value = onValue(value, key)
            }
            o[key] = value;
        })
        return o
    }

    /**
     * Utils.colorAsHex({r: 255, g: 128, b: 0}) // => "#ff8000"
     * Utils.colorAsHex(undefined) // => undefined
     */
    public static colorAsHex(c: { r: number, g: number, b: number }) {
        if (c === undefined) {
            return undefined
        }

        function componentToHex(n) {
            let hex = n.toString(16);
            return hex.length == 1 ? "0" + hex : hex;
        }

        return "#" + componentToHex(c.r) + componentToHex(c.g) + componentToHex(c.b);
    }

    /**
     *
     * Utils.color("#ff8000") // => {r: 255, g:128, b: 0}
     * Utils.color(" rgba  (12,34,56) ") // => {r: 12, g:34, b: 56}
     * Utils.color(" rgba  (12,34,56,0.5) ") // => {r: 12, g:34, b: 56}
     * Utils.color(undefined) // => undefined
     */
    public static color(hex: string): { r: number, g: number, b: number } {
        if (hex === undefined) {
            return undefined
        }
        hex = hex.replace(/[ \t]/g, "")
        if (hex.startsWith("rgba(")) {
            const match = hex.match(/rgba\(([0-9.]+),([0-9.]+),([0-9.]+)(,[0-9.]*)?\)/)
            if (match == undefined) {
                return undefined
            }
            return {r: Number(match[1]), g: Number(match[2]), b: Number(match[3])}
        }

        if (!hex.startsWith("#")) {
            return undefined;
        }
        if (hex.length === 4) {
            return {
                r: parseInt(hex.substr(1, 1), 16),
                g: parseInt(hex.substr(2, 1), 16),
                b: parseInt(hex.substr(3, 1), 16),
            }
        }

        return {
            r: parseInt(hex.substr(1, 2), 16),
            g: parseInt(hex.substr(3, 2), 16),
            b: parseInt(hex.substr(5, 2), 16),
        }
    }

    public static asDict(tags: { key: string, value: string | number }[]): Map<string, string | number> {
        const d = new Map<string, string | number>()

        for (const tag of tags) {
            d.set(tag.key, tag.value)
        }

        return d
    }

    private static colorDiff(c0: { r: number, g: number, b: number }, c1: { r: number, g: number, b: number }) {
        return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b);
    }
}