"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const element_1 = require("../../../../client/element");
const style_1 = require("../../../../client/style");
const id_1 = require("../../../../util/id");
exports.DEFAULT_STYLE = {
    display: 'block',
    width: '100%',
    height: '100%',
    border: 'none',
};
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;
        const slot_id = (0, id_1.randomId)();
        this._slot_id = slot_id;
        const slot_el = createElement('slot');
        slot_el.name = slot_id;
        this._slot_el = slot_el;
        if (id !== undefined) {
            iframe_el.id = id;
        }
        if (className) {
            iframe_el.className = className;
        }
        if (srcdoc !== undefined) {
            iframe_el.srcdoc = srcdoc;
        }
        this._setSrc(src);
        (0, style_1.default)(iframe_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
        this.$element = slot_el;
    }
    onPropChanged(prop, current) {
        if (prop === 'className') {
            this._iframe_el.className = current;
        }
        else if (prop === 'style') {
            (0, style_1.default)(this._iframe_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), current));
        }
        else if (prop === 'src') {
            this._setSrc(current);
        }
        else if (prop === 'srcdoc') {
            this._iframe_el.srcdoc = 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 (_src.startsWith('http://') || _src.startsWith('https://')) {
                //
            }
            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, '*');
    }
}
exports.default = Iframe;
//# sourceMappingURL=Component.js.map