"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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const styled_components_1 = require("styled-components");
const react_native_user_avatar_1 = __importDefault(require("react-native-user-avatar"));
const react_native_1 = require("react-native");
const ui_menu_1 = __importDefault(require("../ui-menu"));
const participantSlice_1 = require("../../store/participantSlice");
const react_redux_1 = require("react-redux");
const newTypes_1 = require("../../types/newTypes");
const borderRadius_1 = __importDefault(require("../../themes/foundations/borderRadius"));
const PeersService_1 = require("../../services/PeersService");
const browser_utils_1 = require("../../utils/browser-utils");
const components_1 = require("../../themes/components");
const PeerName_1 = __importDefault(require("../PeerName"));
const MediaRoomService_1 = require("../../services/MediaRoomService");
const ConfigProvider_1 = require("../../utils/ConfigProvider");
const ParticipantListVariants = {
    hidden: {
        y: -20,
        opacity: 0,
        scale: 0.96,
    },
    visible: {
        opacity: 1,
        y: 0,
    },
    hovered: {
        scale: 1,
    },
    exit: {
        opacity: 0,
        scale: 0,
    },
};
function AcceptDeclinePeers({ rejectRequest, acceptRequest, peer, type, }) {
    const { colors } = react_1.useContext(styled_components_1.ThemeContext);
    return (react_1.default.createElement(components_1.Flex, { direction: "row", align: "center", justify: "space-between", bg: "secondary.800", p: 8, mt: 8, borderRadius: borderRadius_1.default.medium },
        react_1.default.createElement(components_1.Flex, { direction: "row", align: "center" },
            react_1.default.createElement(react_native_user_avatar_1.default, { name: `${peer.name.replace(/[^\w\s]/gi, '')}`, bgColor: colors.primary[500] }),
            react_1.default.createElement(components_1.Text, { ml: 10, color: colors.textPrimary[200], textAlign: "center", fontWeight: "bold" },
                react_1.default.createElement(PeerName_1.default, { name: peer.name > 30
                        ? `${peer.name.substring(0, 20)}...`
                        : `${peer.name}`, charSize: 30 }),
                peer.isMe ? ' (me)' : null)),
        react_1.default.createElement(components_1.Flex, { ml: "auto", mr: 2, direction: "row" },
            react_1.default.createElement(components_1.Box, { mr: 6 },
                react_1.default.createElement(components_1.Button, { onClick: () => acceptRequest(peer.id, type) },
                    react_1.default.createElement(components_1.Icon, { boxSize: "xl", name: "check", fill: colors.success[500] }))),
            react_1.default.createElement(components_1.Box, { ml: 6 },
                react_1.default.createElement(components_1.Button, { onClick: () => rejectRequest(peer.id) },
                    react_1.default.createElement(components_1.Icon, { boxSize: "xl", name: "clear", fill: colors.danger[500] }))))));
}
function Participant({ peer, mediaRoom, permissions, roomViewType, }) {
    const { colors } = react_1.useContext(styled_components_1.ThemeContext);
    const { participantControls } = react_1.useContext(ConfigProvider_1.ConfigServiceContext);
    // TODO: Probably missing permissions
    const anyPermissions = (permissions === null || permissions === void 0 ? void 0 : permissions.pin_participant) || (permissions === null || permissions === void 0 ? void 0 : permissions.can_allow_participant_audio) || (permissions === null || permissions === void 0 ? void 0 : permissions.can_allow_participant_video) || (permissions === null || permissions === void 0 ? void 0 : permissions.kick_participant);
    const showWebinarHostControls = permissions.accept_present_requests;
    const options = [];
    // h
    if (anyPermissions || participantControls.length > 0) {
        if (permissions === null || permissions === void 0 ? void 0 : permissions.pin_participant) {
            if (peer.isPinned) {
                options.push({
                    title: 'Unpin',
                    onClick: () => mediaRoom.pin(null),
                });
            }
            else {
                options.push({
                    title: 'Pin',
                    onClick: () => mediaRoom.pin(peer.id),
                });
            }
        }
        if (permissions === null || permissions === void 0 ? void 0 : permissions.can_allow_participant_audio) {
            options.push({
                title: 'Mute Audio',
                onClick: () => mediaRoom.disableAudio(peer.id),
            });
        }
        if (permissions === null || permissions === void 0 ? void 0 : permissions.can_allow_participant_video) {
            options.push({
                title: 'Disable Video',
                onClick: () => mediaRoom.disableVideo(peer.id),
            });
        }
        if ((permissions === null || permissions === void 0 ? void 0 : permissions.kick_participant) && !peer.isMe) {
            options.push({
                title: 'Kick',
                onClick: () => mediaRoom.kick(peer.id),
            });
        }
        if (roomViewType === newTypes_1.DyteViewTypes.webinar &&
            !peer.isMe &&
            showWebinarHostControls &&
            !peer.webinarHiddenParticipant) {
            options.push({
                title: 'Force Stop Presenting',
                onClick: () => mediaRoom.removePeerFromStage(peer.id, newTypes_1.WebinarAcceptRequestType.REQUESTED_BY_MODERATOR),
            });
        }
        if (roomViewType === newTypes_1.DyteViewTypes.webinar &&
            !peer.isMe &&
            showWebinarHostControls) {
            options.push({
                title: 'Grant Premission to Present',
                onClick: () => mediaRoom.acceptAllRequestToJoinStage([
                    {
                        id: peer.id,
                        requestToJoinType: participantSlice_1.RequestToJoinType.present,
                        type: newTypes_1.WebinarAcceptRequestType.REQUESTED_BY_MODERATOR,
                    },
                ]),
            });
        }
        /* if (roomViewType === DyteViewTypes.webinar && !peer.isMe && showWebinarHostControls) {
            options.push({
                title: 'Grant Premission to Ask',
                onClick: () => mediaRoom.acceptAllRequestToJoinStage(
                    [{
                        id: peer.id,
                        requestToJoinType: RequestToJoinType.ask,
                        type: WebinarAcceptRequestType.REQUESTED_BY_MODERATOR,
                    }],
                ),
            });
        } */
        participantControls.forEach((p) => {
            if (!peer.isMe || p.showSelf !== false) {
                options.push({
                    title: p.label,
                    onClick: () => p.onClick(peer.id),
                });
            }
        });
        options.push({
            title: 'Cancel',
            onClick: () => { },
        });
    }
    return (react_1.default.createElement(components_1.Flex, { direction: "row", align: "center", justify: "space-between", bg: "secondary.800", p: 8, mt: 8, borderRadius: borderRadius_1.default.medium },
        react_1.default.createElement(components_1.Flex, { direction: "row", align: "center" },
            react_1.default.createElement(react_native_user_avatar_1.default, { name: `${peer.displayName.replace(/[^\w\s]/gi, '')}`, bgColor: colors.primary[500] }),
            react_1.default.createElement(components_1.HStack, { ml: 10, color: colors.textPrimary[200], textAlign: "center", fontWeight: "bold" },
                react_1.default.createElement(PeerName_1.default, { name: peer.displayName.length > 30
                        ? `${peer.displayName.substring(0, 20)}...`
                        : `${peer.displayName}`, charSize: 30 }),
                (peer.isMe || peer.label) && (react_1.default.createElement(components_1.Text, { background: "primary.300", color: "textPrimary.100", pr: 4, ml: 4, borderRadius: 3 }, peer.isMe ? 'me' : peer.label)))),
        react_1.default.createElement(components_1.Flex, { ml: "auto", mr: 2, direction: "row" },
            react_1.default.createElement(components_1.Box, { mr: 8 }, peer.producingAudio ? (react_1.default.createElement(components_1.Icon, { boxSize: "xl", name: "mic", fill: colors.textPrimary[400] })) : (react_1.default.createElement(components_1.Icon, { boxSize: "xl", name: "mic-off", fill: colors.danger[500] }))),
            peer.producingVideo ? (react_1.default.createElement(components_1.Icon, { boxSize: "xl", name: "videocam", fill: colors.textPrimary[400] })) : (react_1.default.createElement(components_1.Icon, { boxSize: "xl", name: "videocam-off", fill: colors.danger[500] })),
            (anyPermissions || participantControls.length > 0) && (react_1.default.createElement(ui_menu_1.default, { options: options.map((option) => option.title), actions: options.map((option) => option.onClick) })))));
}
function ParticipantsTab() {
    const roomViewType = react_redux_1.useSelector((state) => state.room.roomViewType);
    const peersService = react_1.useContext(PeersService_1.PeersServiceContext);
    let { processedPeers } = peersService;
    const { selfPeer, joinedProcessedPeers } = peersService;
    const { mediaRoom } = react_1.useContext(MediaRoomService_1.MediaRoomContext);
    const { sessionConfig } = react_1.useContext(ConfigProvider_1.ConfigServiceContext);
    const windowDimensions = browser_utils_1.useWindowDimensions();
    const { width } = browser_utils_1.useScale(sessionConfig.theme.dimensions || windowDimensions);
    const requestToJoinPeersList = react_redux_1.useSelector((state) => state.room.requestToJoinPeersList);
    const requestToPresentPeers = requestToJoinPeersList.filter((el) => el.requestToJoinType === participantSlice_1.RequestToJoinType.present);
    const requestToAskPeers = requestToJoinPeersList.filter((el) => el.requestToJoinType === participantSlice_1.RequestToJoinType.ask);
    processedPeers = [selfPeer]
        .concat(processedPeers.sort((a, b) => a.id.localeCompare(b.id)))
        .filter((el) => !(el === null || el === void 0 ? void 0 : el.webinarHiddenParticipant));
    const attendeesList = [selfPeer]
        .concat(joinedProcessedPeers)
        .filter((el) => el === null || el === void 0 ? void 0 : el.webinarHiddenParticipant)
        .filter((v, i, a) => a.findIndex((t) => t.id === v.id) === i);
    const askPeerList = [selfPeer]
        .concat(joinedProcessedPeers)
        .filter((el) => !(el === null || el === void 0 ? void 0 : el.webinarHiddenParticipant) &&
        el.requestToJoinType === participantSlice_1.RequestToJoinType.ask);
    processedPeers = processedPeers.concat(askPeerList).filter(((set) => (o) => set.has(o.id) ? false : set.add(o.id))(new Set()));
    const acceptRequest = (peerId, requestToJoinType) => {
        mediaRoom.acceptAllRequestToJoinStage([
            {
                id: peerId,
                requestToJoinType,
                type: newTypes_1.WebinarAcceptRequestType.REQUESTED_BY_PARTICIPANT,
            },
        ]);
    };
    const rejectRequest = (peerId) => {
        mediaRoom.rejectRequestToJoinStage(peerId);
    };
    const handleAcceptAll = (peersList) => {
        mediaRoom.acceptAllRequestToJoinStage(peersList.map((el) => ({
            id: el.id,
            requestToJoinType: el.requestToJoinType,
        })));
    };
    // const testConfig = {
    // 	pinParticipant: true,
    // 	disableParticipantAudio: true,
    // 	disableParticipantVideo: true
    // }
    return (react_1.default.createElement(components_1.Flex, { mt: 60, width: width },
        react_1.default.createElement(react_native_1.ScrollView, { style: { padding: 20 } },
            react_1.default.createElement(react_native_1.TouchableWithoutFeedback, null,
                react_1.default.createElement(components_1.Box, null,
                    react_1.default.createElement(components_1.Box, { my: 20 },
                        roomViewType === newTypes_1.DyteViewTypes.webinar &&
                            processedPeers.length > 0 && (react_1.default.createElement(components_1.Text, { fontSize: 16, fontWeight: "bold", mb: 10 },
                            "Presenting (",
                            processedPeers.length,
                            ")")),
                        processedPeers.map((p) => (react_1.default.createElement(Participant, { peer: p, key: p.id, mediaRoom: mediaRoom, permissions: sessionConfig === null || sessionConfig === void 0 ? void 0 : sessionConfig.permissions, roomViewType: roomViewType })))),
                    attendeesList.length > 0 && (react_1.default.createElement(components_1.Box, null,
                        react_1.default.createElement(components_1.Text, { fontSize: 16, fontWeight: "bold", mt: 20, mb: 10 },
                            ' ',
                            "Attending (",
                            attendeesList.length,
                            ")"),
                        attendeesList.map((p) => (react_1.default.createElement(Participant, { key: p.id, peer: p, mediaRoom: mediaRoom, permissions: sessionConfig === null || sessionConfig === void 0 ? void 0 : sessionConfig.permissions, roomViewType: roomViewType }))))),
                    requestToAskPeers.length > 0 && (react_1.default.createElement(components_1.Box, null,
                        react_1.default.createElement(components_1.Text, { fontSize: 16, fontWeight: "bold", mt: 20, mb: 10 },
                            ' ',
                            "Want to ask Question (",
                            requestToAskPeers.length,
                            ")"),
                        requestToAskPeers.map((p) => (react_1.default.createElement(AcceptDeclinePeers, { rejectRequest: rejectRequest, acceptRequest: acceptRequest, peer: p, key: p.id, type: "REQUEST_TO_ASK" }))))),
                    requestToPresentPeers.length > 0 && (react_1.default.createElement(components_1.Box, null,
                        react_1.default.createElement(components_1.Text, { fontSize: 16, fontWeight: "bold", mt: 20, mb: 10 },
                            ' ',
                            "Want to Present (",
                            requestToPresentPeers.length,
                            ")"),
                        requestToPresentPeers.map((p) => (react_1.default.createElement(AcceptDeclinePeers, { rejectRequest: rejectRequest, acceptRequest: acceptRequest, peer: p, key: p.id, type: "REQUEST_TO_PRESENT" }))))),
                    react_1.default.createElement(components_1.Box, { height: 200 }))))));
}
exports.default = ParticipantsTab;
//# sourceMappingURL=ParticipantsTab.js.map