var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { part, component } from '../../decorators.js';
import { DOMPart } from '../dom/dom.js';
import { transformLegacySticker } from './legacy.js';
import { StickerComponent } from './sticker-component.js';
let StickerPart = class StickerPart extends DOMPart {
    constructor() {
        super();
        this._stickers = {
            categorisedResource: [],
            categoryEnum: [],
            resourceSet: [],
            getUrl: () => { return ''; },
            getRandom: () => { return ''; },
            getRandomFrom: () => { return ''; },
            cacheValue: () => { return new HTMLCanvasElement(); },
            load: () => { return Promise.resolve(); },
        };
        this.core = this._components.get('core');
        this.core.invalidate();
    }
    static transformLegacy(app) {
        transformLegacySticker(app);
    }
    onInstall(context) {
        super.onInstall(context);
        if (context.resources.get('stickers')) {
            this._stickers = context.resources.get('stickers');
        }
        if (this._stickers && this._stickers.default) {
            this.core.image.set(this._stickers.default);
            this.core.invalidate();
        }
    }
    getElement() {
        const el = document.createElement('div');
        el.style.width = '100px';
        el.style.height = '100px';
        el.style.backgroundSize = 'contain';
        el.style.backgroundRepeat = 'no-repeat';
        el.style.backgroundPosition = 'center';
        el.title = 'sticker';
        return el;
    }
    render() {
        super.render();
        if (!this.core.invalidated) {
            return;
        }
        const sticker = this.core.image.get();
        if (this._stickers) {
            this._el.style.backgroundImage = `url(${this._stickers.getUrl(sticker || this._stickers.default || '')})`;
        }
        this.core.apply();
    }
    renderComponents(ctx) {
        const transform = this._components.get('transform');
        let url = '';
        if (transform) {
            this.applyTransform(ctx);
        }
        const sticker = this.core.image.get();
        if (this._stickers) {
            url = this._stickers.getUrl(sticker || this._stickers.default || '');
        }
        const imageLoaded = new Promise((res, reject) => {
            const img = new Image();
            img.onload = () => {
                this._components.forEach(component => component.render(ctx, img));
                this.resetTransform(ctx);
                res();
            };
            img.onerror = reject;
            img.crossOrigin = "Anonymous";
            img.src = url;
        });
        return imageLoaded;
    }
    set image(id) {
        this.core.image.set(id);
        this.core.invalidate();
    }
    random(id) {
        if (!this._stickers) {
            return '';
        }
        if (id === 'all') {
            return this._stickers.getRandom();
        }
        return this._stickers.getRandomFrom(id);
    }
};
__decorate([
    component(StickerComponent)
], StickerPart.prototype, "core", void 0);
StickerPart = __decorate([
    part('sticker')
], StickerPart);
export { StickerPart };
//# sourceMappingURL=sticker.js.map