"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const element_1 = require("../../../../client/element");
const propHandler_1 = require("../../../../client/propHandler");
const style_1 = require("../../../../client/style");
const array_1 = require("../../../../util/array");
const id_1 = require("../../../../util/id");
exports.DEFAULT_STYLE = {
    display: 'block',
    border: 'none',
    width: '100%',
    height: '100%',
};
class Iframe extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        const { id, className, style = {}, src, srcdoc } = this.$props;
        const { root, api: { document: { createElement }, }, } = this.$system;
        const iframe_el = this.$system.api.document.createElement('iframe');
        iframe_el.slot = '';
        root.appendChild(iframe_el);
        this._iframe_el = iframe_el;
        iframe_el.setAttribute('frameborder', '0');
        const slot_id = (0, id_1.randomId)();
        this._slot_id = slot_id;
        const slot_el = createElement('slot');
        slot_el.name = slot_id;
        if (id !== undefined) {
            iframe_el.id = id;
        }
        if (className) {
            iframe_el.className = className;
        }
        if (srcdoc !== undefined) {
            iframe_el.srcdoc = srcdoc;
        }
        iframe_el.allowFullscreen = true;
        this._setSrc(src);
        (0, style_1.applyStyle)(iframe_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
        this._prop_handler = Object.assign(Object.assign({}, (0, propHandler_1.htmlPropHandler)(this, iframe_el, exports.DEFAULT_STYLE)), { srcdoc: (current) => {
                this._iframe_el.srcdoc = current || '';
            }, src: (current) => {
                this._setSrc(current);
            } });
        this.$element = slot_el;
        this.$node = iframe_el;
        (0, array_1.push)(this.$system.cache.iframe, this);
    }
    onPropChanged(prop, current) {
        this._prop_handler[prop](current);
    }
    _setSrc(current) {
        const _src = this._parseSrc(current);
        if (_src === undefined) {
            this._iframe_el.removeAttribute('src');
        }
        else {
            this._iframe_el.src = _src;
        }
    }
    _parseSrc(current) {
        let _src = current;
        if (_src !== undefined) {
            if (new RegExp('^(.+)://', 'i').exec(_src)) {
                //
            }
            else {
                const { origin, pathname } = (window && window.location) || {
                    origin: '',
                    pathname: '',
                };
                if (_src.startsWith('/')) {
                    //
                }
                else {
                    if (pathname.endsWith('/')) {
                        //
                    }
                    else {
                        _src = '/' + _src;
                    }
                    _src = pathname + _src;
                }
                _src = origin + _src;
            }
        }
        return _src;
    }
    onMount() {
        // console.log('Iframe', 'onMount')
        this._iframe_el.slot = this._slot_id;
    }
    onUnmount() {
        // console.log('Iframe', 'onUnmount')
        this._iframe_el.slot = '';
    }
    send(data) {
        // console.log('Iframe', 'send', data)
        this._iframe_el.contentWindow.postMessage(data, '*');
    }
    onDestroy() {
        (0, array_1.pull)(this.$system.cache.iframe, this);
    }
}
exports.default = Iframe;
//# sourceMappingURL=Component.js.map