import React, { useContext, useState, } from 'react';
import { PluginServiceContext } from '../services/PluginService';
import { PeersServiceContext } from '../services/PeersService';
import { Flex, Box, Button, Icon, } from '../themes/components';
import { WebView } from 'react-native-webview';
import { View } from 'react-native';
import { useOrientation } from '../utils/browser-utils';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import { useSelector } from '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();
export const PluginWrapper = ({ frame, height, width, }) => {
    const service = useContext(PluginServiceContext);
    const { selfPeer } = useContext(PeersServiceContext);
    const { sessionConfig } = useContext(ConfigServiceContext);
    const participantUserId = useSelector((state) => state.participant.id);
    const plugins = 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?.enabledBy
        || pluginPermissions?.can_close;
    const canEditAccessControl = participantUserId === activePlugin?.enabledBy
        || pluginPermissions?.can_edit_acl;
    const hostOnlyControl = (sessionConfig.permissions.plugins
        .config[activePlugin.id]?.defaultAccess || 'blacklist') === 'whitelist';
    const canControl = () => {
        if (participantUserId === activePlugin?.enabledBy)
            return true;
        if (hostOnlyControl) {
            return activePlugin?.ACLAccessGrantedUsers?.includes(participantUserId);
        }
        return !activePlugin.ACLAccessRemovedUsers.includes(participantUserId);
    };
    const blockInputs = () => {
        const handlesViewOnly = sessionConfig.permissions.plugins
            .config[activePlugin.id]?.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 } = useOrientation();
    const mobileLandscape = orientation === 'LANDSCAPE';
    const [loading, setLoading] = useState(true);
    width -= 10;
    if (mobileLandscape) {
        width -= 10;
        height -= 72;
    }
    const registerIframe = (element) => {
        service.pluginManager.addIframeView(frame, element, EM);
    };
    return (<Flex height={height} width={width} borderRadius={12} overflow="hidden">
			<Flex direction="column">
				{selfPeer.isHost && (<Flex justify="flex-end" align="center" cursor="pointer" bg="secondary.700">
						<Button onClick={removePlugin}>
							<Box p={4}>
								<Icon name="close" boxSize="16"/>
							</Box>
						</Button>
					</Flex>)}
				<Flex width={width} height={height} justify="center" align="center" direction="row">
					

					<View style={{
        transform: mobileLandscape ? [] : [{ rotate: '90deg' }],
        width: mobileLandscape ? width : height,
        height: mobileLandscape ? height : width,
    }}>
						<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);
									}
								})`}/>
					</View>

				</Flex>
			</Flex>
		</Flex>);
};
export default PluginWrapper;
//# sourceMappingURL=PluginWrapper.js.map