"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const Holder_1 = require("../../../../../Class/Holder");
const boot_1 = require("../../../../../client/platform/web/boot");
const attachStyle_1 = require("../../../../../client/render/attachStyle");
const renderComponent_1 = require("../../../../../client/render/renderComponent");
const theme_1 = require("../../../../../client/theme");
const APINotImplementedError_1 = require("../../../../../exception/APINotImplementedError");
const callAll_1 = require("../../../../../util/call/callAll");
const _ids_1 = require("../../../../_ids");
const globalComponent_1 = require("../../../../globalComponent");
class DocumentPictureInPicture extends Holder_1.Holder {
    constructor(system) {
        super({
            fi: ['component', 'opt'],
        }, {
            input: {
                component: {
                    ref: true,
                },
            },
        }, system, _ids_1.ID_DOCUMENT_PICTURE_IN_PICTURE);
    }
    async f({ component, opt }, done, fail) {
        const { api: { document: { createTextNode }, window: { documentPictureInPicture }, }, } = this.__system;
        // @ts-ignore
        if (!documentPictureInPicture || !documentPictureInPicture.requestWindow) {
            fail((0, APINotImplementedError_1.apiNotSupportedError)('Document Picture In Picture'));
            return;
        }
        component.register();
        let window;
        try {
            window = (await documentPictureInPicture.requestWindow());
        }
        catch (err) {
            if (err.message ===
                "Failed to execute 'requestWindow' on 'DocumentPictureInPicture': Document PiP requires user activation") {
                fail('Document PiP requires user activation');
                return;
            }
            fail(err.message);
            return;
        }
        const root = document.createElement('div');
        root.style.width = '100%';
        root.style.height = '100%';
        const style = document.createElement('style');
        style.appendChild(createTextNode(`${attachStyle_1.HTML_STYLE}
      body {
        background-color: ${theme_1.COLOR_GRAYSCALE_BASE10};
        color: ${theme_1.COLOR_GRAYSCALE_BASE01}
      }`));
        window.document.head.appendChild(style);
        window.document.body.appendChild(root);
        const [system, deboot] = (0, boot_1.webBoot)(window, root);
        const component_ = await (0, globalComponent_1.firstGlobalComponentPromise)(this.__system, component.__global_id);
        const { $context, $system } = component_;
        const base = component_.getRootLeaves();
        if ($context) {
            component_.unmount();
        }
        // component_.domRemoveLeaves(base)
        component_.setSystem(system);
        const unrender = (0, renderComponent_1.renderComponent)(system, null, system.foreground.app, component_);
        component_.setDetached(true);
        const back = () => {
            component_.setSystem($system);
            for (const leaf of base) {
                if (leaf.$domParent) {
                    leaf.$domParent.$element.appendChild(leaf.$element);
                }
            }
            if ($context) {
                component_.mount($context);
            }
        };
        this._unlisten = (0, callAll_1.callAll)([
            () => {
                component_.setDetached(false);
            },
            unrender,
            back,
            deboot,
        ]);
        window.addEventListener('pagehide', () => {
            this.d();
            done();
        });
    }
    d() {
        if (this._unlisten) {
            this._unlisten();
            this._unlisten = undefined;
        }
    }
}
exports.default = DocumentPictureInPicture;
//# sourceMappingURL=index.js.map