"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const element_1 = require("../../../../client/element");
const propHandler_1 = require("../../../../client/propHandler");
const renderComponent_1 = require("../../../../client/render/renderComponent");
const style_1 = require("../../../../client/style");
const element_2 = require("../../../../util/element");
const DEFAULT_STYLE = {
    width: '100%',
    height: '100%',
    color: 'currentColor',
    boxSizing: 'border-box',
};
class Render extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        const { component, id, className, style, innerText, tabIndex, title, draggable, data = {}, } = this.$props;
        this.$element = this.$system.api.document.createElement('div');
        if (id !== undefined) {
            this.$element.id = id;
        }
        if (className !== undefined) {
            this.$element.className = className;
        }
        (0, style_1.applyStyle)(this.$element, Object.assign(Object.assign({}, DEFAULT_STYLE), style));
        if (innerText) {
            this.$element.innerText = innerText;
        }
        if (tabIndex !== undefined) {
            this.$element.tabIndex = tabIndex;
        }
        if (title) {
            this.$element.title = title;
        }
        if (draggable !== undefined) {
            this.$element.setAttribute('draggable', draggable.toString());
        }
        if (data !== undefined) {
            for (const key in data) {
                const d = data[key];
                this.$element.dataset[key] = d;
            }
        }
        this._prop_handler = Object.assign(Object.assign({}, (0, propHandler_1.htmlPropHandler)(this, this.$element, DEFAULT_STYLE)), { unit: (component) => {
                if (this._unlisten) {
                    this._unlisten();
                    this._unlisten = undefined;
                    (0, element_2.removeChildren)(this.$element);
                }
                if (component) {
                    this._unlisten = (0, renderComponent_1.renderComponent)(this.$element, this.$system, component);
                }
            } });
    }
    onPropChanged(prop, current) {
        // console.log('Render', 'onPropChanged', prop, current)
        this._prop_handler[prop](current);
    }
}
exports.default = Render;
//# sourceMappingURL=Component.js.map