"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NO_IMAGE = exports.DEFAULT_STYLE = void 0;
const element_1 = require("../../../../../client/element");
const style_1 = require("../../../../../client/style");
exports.DEFAULT_STYLE = {
    display: 'block',
    // 'max-width': '100%',
    // 'max-height': '100%',
    // 'min-width': '0',
    // 'min-height': '0',
    width: '100%',
    height: '100%',
    'object-fit': 'contain',
};
exports.NO_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
class Image_ extends element_1.Element {
    constructor($props, $system, $element) {
        super($props, $system);
        const { className, style = {}, src } = this.$props;
        const img_el = $element !== null && $element !== void 0 ? $element : this.$system.api.document.createElement('img');
        if (className) {
            img_el.className = className;
        }
        (0, style_1.applyStyle)(img_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
        if (src !== undefined) {
            img_el.src = src;
        }
        img_el.addEventListener('error', (err) => {
            img_el.src = exports.NO_IMAGE;
        });
        img_el.draggable = false;
        this._img_el = img_el;
        this.$element = img_el;
    }
    onPropChanged(prop, current) {
        if (prop === 'className') {
            this._img_el.className = current;
        }
        else if (prop === 'style') {
            (0, style_1.applyStyle)(this._img_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), current));
        }
        else if (prop === 'src') {
            this._img_el.src = current || exports.NO_IMAGE;
        }
    }
}
exports.default = Image_;
//# sourceMappingURL=Component.js.map