import * as electron from "electron";
import * as loader from "tc-loader";
import {Stage} from "tc-loader";
import NativeImage = electron.NativeImage;

let _div: JQuery;
let _icon_mash_url: string;
let _icon_mask_img: NativeImage;
let _cache_klass_map: {[key: string]: NativeImage};

export function class_to_image(klass: string) : NativeImage {
    if(!klass || !_icon_mask_img || !_cache_klass_map)
        return undefined;

    if(_cache_klass_map[klass])
        return _cache_klass_map[klass];

    _div[0].classList.value = 'icon ' + klass;
    const data = window.getComputedStyle(_div[0]);

    const offset_x = parseInt(data.backgroundPositionX.split(",")[0]);
    const offset_y = parseInt(data.backgroundPositionY.split(",")[0]);

    //http://localhost/home/TeaSpeak/Web-Client/web/environment/development/img/client_icon_sprite.svg
    //const hight = element.css('height');
    //const width = element.css('width');
    console.log("Offset: x: %o y: %o;", offset_x, offset_y);
    return _cache_klass_map[klass] = _icon_mask_img.crop({
        height: 16,
        width: 16,
        x: offset_x == 0 ? 0 : -offset_x,
        y: offset_y == 0 ? 0 : -offset_y
    });
}

loader.register_task(Stage.JAVASCRIPT_INITIALIZING, {
    priority: 100,
    name: "native icon sprite loader",
    function: async () => {
        if(!_div) {
            _div = $(document.createElement("div"));
            _div.css('display', 'none');
            _div.appendTo(document.body);
        }

        const image = new Image();
        image.src = 'img/client_icon_sprite.svg';
        await new Promise((resolve, reject) => {
            image.onload = resolve;
            image.onerror = reject;
        });

        /* TODO: Get a size! */
        const canvas = document.createElement("canvas");
        canvas.width = 1024;
        canvas.height = 1024;
        canvas.getContext("2d").drawImage(image, 0, 0);

        _cache_klass_map = {};
        _icon_mash_url = canvas.toDataURL();
        _icon_mask_img = electron.remote.nativeImage.createFromDataURL(_icon_mash_url);
    }
})

export function finalize() {
    _icon_mask_img = undefined;
    _icon_mash_url = undefined;
    _cache_klass_map = undefined;
}