"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PluginWrapper = void 0;
const react_1 = __importStar(require("react"));
const PluginService_1 = require("./PluginService");
const PeersService_1 = require("./PeersService");
const components_1 = require("../themes/components");
const react_native_webview_1 = require("react-native-webview");
const react_native_1 = require("react-native");
const OrientationContext_1 = require("./OrientationContext");
const ConfigProvider_1 = require("../utils/ConfigProvider");
const react_redux_1 = require("react-redux");
class BasicEvents {
    constructor() {
        this.fxs = [];
    }
    onMessage(data) { this.fxs.forEach((fx) => fx(data)); }
    addEventListener(fx) { this.fxs.push(fx); }
}
const EM = new BasicEvents();
exports.PluginWrapper = ({ frame, height, width, }) => {
    var _a;
    const service = react_1.useContext(PluginService_1.PluginServiceContext);
    const { selfPeer } = react_1.useContext(PeersService_1.PeersServiceContext);
    const { sessionConfig } = react_1.useContext(ConfigProvider_1.ConfigServiceContext);
    const participantUserId = react_redux_1.useSelector((state) => state.participant.id);
    const plugins = react_redux_1.useSelector((state) => state.plugin.plugins);
    const activePlugin = plugins.find((p) => p.id === frame.plugin);
    const pluginPermissions = sessionConfig.permissions.plugins || {
        can_close: false,
        can_start: true,
        can_edit_acl: false,
    };
    const canRemovePlugin = participantUserId === (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.enabledBy)
        || (pluginPermissions === null || pluginPermissions === void 0 ? void 0 : pluginPermissions.can_close);
    const canEditAccessControl = participantUserId === (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.enabledBy)
        || (pluginPermissions === null || pluginPermissions === void 0 ? void 0 : pluginPermissions.can_edit_acl);
    const hostOnlyControl = (((_a = sessionConfig.permissions.plugins
        .config[activePlugin.id]) === null || _a === void 0 ? void 0 : _a.defaultAccess) || 'blacklist') === 'whitelist';
    const canControl = () => {
        var _a;
        if (participantUserId === (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.enabledBy))
            return true;
        if (hostOnlyControl) {
            return (_a = activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.ACLAccessGrantedUsers) === null || _a === void 0 ? void 0 : _a.includes(participantUserId);
        }
        return !activePlugin.ACLAccessRemovedUsers.includes(participantUserId);
    };
    const blockInputs = () => {
        var _a;
        const handlesViewOnly = (_a = sessionConfig.permissions.plugins
            .config[activePlugin.id]) === null || _a === void 0 ? void 0 : _a.handlesViewOnly;
        const ret = !canControl() && !handlesViewOnly;
        if (handlesViewOnly) {
            service.pluginManager.sendIframeEvent({
                type: 'websocket/plugin-data',
                payload: {
                    pluginId: activePlugin.id,
                    type: 'setViewOnly',
                    value: !canControl(),
                },
            });
        }
        return ret;
    };
    const removePlugin = () => {
        service.pluginManager.removeRoomPlugin({
            id: frame.plugin,
        });
    };
    const { orientation } = react_1.default.useContext(OrientationContext_1.OrientationContext);
    const mobileLandscape = orientation === 'LANDSCAPE';
    const [loading, setLoading] = react_1.useState(true);
    width -= 10;
    if (mobileLandscape) {
        width -= 10;
        height -= 72;
    }
    const isPensilTambola = (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.id) === '80a57014-1efe-44f8-b929-b8fca1cf18a1';
    const pensilTambolaRotation = isPensilTambola ? '0deg' : '90deg';
    const registerIframe = (element) => {
        service.pluginManager.addIframeView(frame, element, EM);
    };
    return (react_1.default.createElement(components_1.Flex, { height: height, width: width, borderRadius: 12, overflow: "hidden", borderColor: "primary.300", borderWidth: blockInputs() ? 4 : 0 },
        react_1.default.createElement(components_1.Flex, { direction: "column" },
            selfPeer.isHost && (react_1.default.createElement(components_1.Flex, { justify: "flex-end", align: "center", cursor: "pointer", bg: "secondary.700" },
                react_1.default.createElement(components_1.Button, { onClick: removePlugin },
                    react_1.default.createElement(components_1.Box, { p: 4 },
                        react_1.default.createElement(components_1.Icon, { name: "close", boxSize: "16" }))))),
            react_1.default.createElement(components_1.Flex, { width: width, height: height, justify: "center", align: "center", direction: "row" },
                react_1.default.createElement(react_native_1.View, { style: {
                        transform: mobileLandscape ? [] : [{ rotate: pensilTambolaRotation }],
                        width: mobileLandscape || isPensilTambola ? width : height,
                        height: mobileLandscape || isPensilTambola ? height : width,
                    }, pointerEvents: blockInputs() ? 'none' : 'auto' },
                    react_1.default.createElement(react_native_webview_1.WebView, { source: { uri: frame.url }, ref: registerIframe, onMessage: (event) => {
                            const data = JSON.parse(event.nativeEvent.data);
                            if (data.type) {
                                EM.onMessage(data);
                            }
                        }, injectedJavaScript: `
								setTimeout(function(){
									window.parent = {};
									function postMessage (a, b) {
										if (!window.ReactNativeWebView.postMessage) {
											setTimeout(() => {k
												postMessage(a, b);
											}, 100);
											return;
										}
										window.ReactNativeWebView.postMessage(JSON.stringify(a));
									}
									window.parent.postMessage = (a, b) => {
										postMessage(a);
									}
								})` }))))));
};
exports.default = exports.PluginWrapper;
//# sourceMappingURL=PluginWrapper.js.map