"use strict";
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-underscore-dangle */
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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
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 react_redux_1 = require("react-redux");
const toolkit_1 = require("@reduxjs/toolkit");
const react_native_1 = require("react-native");
const participantSlice_1 = require("../store/participantSlice");
const components_1 = require("../themes/components");
const borderRadius_1 = __importDefault(require("../themes/foundations/borderRadius"));
const browser_utils_1 = require("../utils/browser-utils");
const media_utils_1 = require("../utils/media-utils");
const roomSlice_1 = require("../store/roomSlice");
const MediaRoomService_1 = require("../services/MediaRoomService");
const StageControlButton_1 = require("./StageControlButton");
const UserTrackProvider_1 = require("../services/UserTrackProvider");
const DropFromStage_1 = __importDefault(require("./Modals/DropFromStage"));
/* import { StageSidebarView } from '@src/components/StageSidebar';
import { PeersServiceContext } from '@src/services/PeersService';
/* import MuteAllPopover from '@src/components/MuteAllPopover';
 */ const APITypes_1 = require("../types/APITypes");
const analytics_1 = __importDefault(require("../utils/analytics"));
const ConfigProvider_1 = require("../utils/ConfigProvider");
const MobileDrawer_1 = __importDefault(require("./MobileDrawer"));
const PeersService_1 = require("../services/PeersService");
const MobileChatTab_1 = __importDefault(require("./StageSidebar/MobileChatTab"));
const PollsTab_1 = __importDefault(require("./StageSidebar/PollsTab"));
const ParticipantsTab_1 = __importDefault(require("./StageSidebar/ParticipantsTab"));
const env_1 = require("../env");
const newTypes_1 = require("../types/newTypes");
const src_1 = require("../utils/dyte-utils/src");
const styled_components_1 = require("styled-components");
const recording_1 = require("../utils/recording");
const notificationCircle_1 = __importDefault(require("./notificationCircle"));
const DrawerService_1 = require("../services/DrawerService");
const OrientationContext_1 = require("../services/OrientationContext");
const { DyteHelper } = react_native_1.NativeModules;
const _StageControlBar = ({ leaveCall, copyLink, linkCopied, isMobile, }) => {
    var _a, _b, _c, _d, _e;
    const { mediaRoom } = react_1.useContext(MediaRoomService_1.MediaRoomContext);
    const { isOpen, onOpen, onClose } = browser_utils_1.useDisclosure();
    const { selfPeer, allMuted } = react_1.useContext(PeersService_1.PeersServiceContext);
    const red = 'danger.500';
    const gray = 'textPrimary.400';
    const disabledGray = 'secondary.700';
    const { mediaTracks: { screenShareVideoTrack, setScreenShareVideoTrack, screenShareAudioTrack, setScreenShareAudioTrack, audioTrack, }, inputDevices: { toggleAudioState, toggleVideoState, audioInputDevices, videoInputDevices, onAudioInputChange, onVideoInputChange, }, audioButtonsEnabled, videoButtonsEnabled, } = react_1.useContext(UserTrackProvider_1.UserTrackContext);
    const { meeting, sessionConfig } = react_1.useContext(ConfigProvider_1.ConfigServiceContext);
    const windowDimensions = react_native_1.useWindowDimensions();
    let { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const { audio: audioAllowed, screenshare: screensShareAllowed } = sessionConfig.permissions.produce;
    const { drawerExpanded, setDrawerExpander, openedTab, setopenedTab } = react_1.default.useContext(DrawerService_1.DrawerContext);
    const consumers = react_redux_1.useSelector((state) => state.consumers.activeConsumers);
    const audioMuted = react_redux_1.useSelector((state) => state.participant.audioMuted);
    const videoOff = react_redux_1.useSelector((state) => state.participant.videoOff);
    const videoTrackSelection = react_redux_1.useSelector((state) => state.participant.videoTrackSelection);
    const audioTrackSelection = react_redux_1.useSelector((state) => state.participant.audioTrackSelection);
    const plugins = react_redux_1.useSelector((state) => state.plugin.plugins);
    const sharingScreen = react_redux_1.useSelector((state) => state.participant.sharingScreen);
    const permissions = react_redux_1.useSelector((state) => state.participant.participantPermissions);
    const chatMessages = react_redux_1.useSelector((state) => state.room.chatMessages);
    const requestToJoinPeersList = react_redux_1.useSelector((state) => state.room.requestToJoinPeersList);
    const newParticipantRequest = (requestToJoinPeersList || []).filter((m) => m.seen !== true);
    const selfRequestToJoinType = react_redux_1.useSelector((state) => state.participant.requestToJoinType);
    const joinToStageState = react_redux_1.useSelector((state) => state.participant.requestToJoinStageState);
    const canPresent = react_redux_1.useSelector((state) => state.participant.canPresent);
    const roomViewType = react_redux_1.useSelector((state) => state.room.roomViewType);
    const videoAllowed = roomViewType !== src_1.DyteViewTypes.webinar
        ? sessionConfig.permissions.produce.video.allow
        : canPresent;
    const webinarHiddenParticipant = react_redux_1.useSelector((state) => state.participant.webinarHiddenParticipant) && roomViewType === src_1.DyteViewTypes.webinar;
    const gridView = react_redux_1.useSelector((state) => state.room.gridView);
    const presentingState = react_redux_1.useSelector((state) => state.participant.presentingState);
    const [extraButtons, setExtraButtons] = react_1.useState([]);
    const [showDropFromStageModal, setShowDropFromState] = react_1.useState(false);
    react_1.useEffect(() => {
        if (meeting) {
            meeting.controlBar._setButtons = (customButtons) => {
                setExtraButtons([...customButtons]);
            };
        }
    }, [meeting]);
    react_1.useEffect(() => {
        if (sessionConfig.permissions.view_type === src_1.DyteViewTypes.groupCall) {
            // if in PIP mode, remove from stage in group call
            if (joinToStageState === participantSlice_1.RequestToJoinStageState.ACCEPTED) {
                mediaRoom.removePeerFromStage(mediaRoom.peerid, newTypes_1.WebinarAcceptRequestType.REQUESTED_BY_PARTICIPANT);
            }
        }
        if (sessionConfig.permissions.view_type === src_1.DyteViewTypes.webinar) {
            if (webinarHiddenParticipant && !videoOff) {
                toggleVideoState();
            }
        }
    }, [sessionConfig.permissions.view_type]);
    const dispatch = react_redux_1.useDispatch();
    const { orientation, orientationType } = react_1.default.useContext(OrientationContext_1.OrientationContext);
    const mobileLandscape = orientation === 'LANDSCAPE';
    // TODO: This is wrong. fix get transform logic
    if (mobileLandscape) {
        [height, width] = [width, height];
    }
    const getTransform = () => {
        const x = { transform: [{ rotate: '-90deg' }] };
        return browser_utils_1.withAnchorPoint(x, { x: 1, y: 0 }, { width, height: 64 });
    };
    const landscapeRight = orientationType === 'landscapeLeft' ? 56 : height - 6;
    const mobileLandscapeProps = mobileLandscape
        ? Object.assign({ zIndex: 10, position: 'absolute', top: 0, right: landscapeRight }, getTransform()) : { position: 'absolute', bottom: 1 };
    const screenShareHandler = () => __awaiter(void 0, void 0, void 0, function* () {
        if (!sharingScreen) {
            analytics_1.default.captureEvent('share screen started');
            if (screenShareVideoTrack !== undefined) {
                screenShareVideoTrack.stop();
            }
            if (screenShareAudioTrack !== undefined) {
                screenShareVideoTrack.stop();
            }
            if (react_native_1.Platform.Version >= 26) {
                yield DyteHelper.createNotificationChannel();
            }
            dispatch(roomSlice_1.setScreenShareRequested(true));
            yield DyteHelper.startService();
            try {
                const tracks = yield media_utils_1.getScreenShare();
                if (!videoOff)
                    toggleVideoState(); // if(!videoOff)toggleVideoState();
                setScreenShareVideoTrack(tracks.video);
                setScreenShareAudioTrack(tracks.audio);
                mediaRoom.shareScreen(tracks);
            }
            catch (error) {
                if ((error === null || error === void 0 ? void 0 : error.message) !== 'NotAllowedError') {
                    console.error(error);
                }
                dispatch(roomSlice_1.setScreenShareRequested(true));
            }
        }
        else {
            dispatch(roomSlice_1.setScreenShareRequested(false));
            mediaRoom.disableScreenShare();
            setScreenShareVideoTrack(undefined);
            setScreenShareAudioTrack(undefined);
            DyteHelper.stopService();
        }
    });
    const changeGridView = () => __awaiter(void 0, void 0, void 0, function* () {
        if (gridView === 'multi')
            dispatch(roomSlice_1.setRoomGridView('highlighted'));
        else
            dispatch(roomSlice_1.setRoomGridView('multi'));
    });
    const processLabel = (dev) => {
        if (!dev.label)
            return dev.label;
        if (Number.isInteger(Number(dev.label))) {
            return dev.facing === 'environment'
                ? 'Back Camera'
                : 'Front Camera';
        }
        return dev.label;
    };
    const selfId = react_redux_1.useSelector((state) => state.participant.id);
    const unReadChatMessages = chatMessages.filter((m) => m.read !== true &&
        m.userId !== selfId &&
        m.type !== APITypes_1.MessageTypes.poll);
    const unSeenPolls = chatMessages.filter((m) => m.read !== true &&
        m.type === APITypes_1.MessageTypes.poll &&
        m.userId !== selfId);
    const unReadNotificationsLength = unReadChatMessages.length +
        unSeenPolls.length +
        newParticipantRequest.length;
    const { colors } = react_1.useContext(styled_components_1.ThemeContext);
    const screenShareCount = consumers.filter((c) => c.kind === 'video' && c.appData.screenShare).length;
    const [recordingId, setRecordingId] = react_1.useState(null);
    const [recordingState, setRecordingState] = react_1.useState('not_init');
    const recordingPeer = react_redux_1.useSelector((state) => state.peers.recordingPeer);
    const authToken = react_redux_1.useSelector((state) => state.participant.authToken);
    const roomName = react_redux_1.useSelector((state) => state.room.roomName);
    const organizationId = react_redux_1.useSelector((state) => state.participant.organizationId);
    react_1.useEffect(() => {
        if (authToken &&
            roomName &&
            organizationId &&
            recordingState === 'not_init') {
            const options = { authToken, roomName, organizationId };
            recording_1.getActiveRecording(options).then((resp) => {
                if (resp.data && resp.data.recording) {
                    if (resp.data.recording.status === 'UPLOADING') {
                        setRecordingState('stopping');
                    }
                    else if (resp.data.recording.status === 'INVOKED') {
                        setRecordingState('starting');
                    }
                    else {
                        setRecordingState('recording');
                    }
                    setRecordingId(resp.data.recording.id);
                }
                else {
                    setRecordingState('not_started');
                }
            });
        }
    }, [authToken, roomName, organizationId, recordingId]);
    react_1.useEffect(() => {
        if (recordingState === 'starting' && recordingPeer) {
            setRecordingState('recording');
        }
        else if (recordingState === 'stopping' && !recordingPeer) {
            setRecordingState('not_started');
        }
    }, [recordingPeer]);
    const onRecordButtonClicked = () => __awaiter(void 0, void 0, void 0, function* () {
        var _f, _g;
        const options = { authToken, roomName, organizationId };
        if (recordingId) {
            setRecordingState('stopping');
            options.recordingId = recordingId;
            try {
                yield recording_1.stopRecording(options);
                setRecordingId(null);
            }
            catch (err) {
                setRecordingState('recording');
            }
        }
        else {
            setRecordingState('starting');
            try {
                const resp = yield recording_1.startRecording(options);
                const id = (_g = (_f = resp.data) === null || _f === void 0 ? void 0 : _f.recording) === null || _g === void 0 ? void 0 : _g.id;
                setRecordingId(id);
            }
            catch (err) {
                setRecordingState('not_started');
            }
        }
    });
    const recordingLoading = recordingState === 'starting' ||
        recordingState === 'stopping' ||
        recordingState === 'not_init';
    const handRaisedEnabled = organizationId === 'afb2f538-bfca-4178-b9de-fa13b15ec590' || meeting.setupConfig.clientId === 'afb2f538-bfca-4178-b9de-fa13b15ec590' || env_1.DYTE_DEV_MODE;
    const handRaised = react_redux_1.useSelector((state) => state.participant.handRaised);
    const getRecordingLabel = () => {
        switch (recordingState) {
            case 'not_init':
                return 'Loading';
            case 'not_started':
                return 'Record';
            case 'recording':
                return 'Stop Record';
            case 'starting':
                return 'Starting Recording';
            case 'stopping':
                return 'Stopping Recording';
            default:
                return 'Loading';
        }
    };
    const getRecordingIcon = () => {
        switch (recordingState) {
            case 'not_started':
                return react_1.default.createElement(components_1.Icon, { name: "fiber-manual-record", fill: red });
            case 'recording':
                return react_1.default.createElement(components_1.Icon, { name: "fiber-manual-record", fill: gray });
            case 'starting':
            case 'stopping':
            case 'not_init':
            default:
                return react_1.default.createElement(components_1.Spinner, { color: colors.textPrimary[100], size: "small" });
        }
    };
    const getHandRaiseLabel = () => handRaised ? 'Lower Hand' : 'Raise Hand';
    const getHandRaiseIcon = () => react_1.default.createElement(components_1.Icon, { name: 'hand-back-left', fill: 'white' });
    const onHandRaiseClicked = () => {
        meeting.sendRoomMessage({
            payload: {
                id: meeting.self.id,
                name: meeting.self.name,
            },
            type: !handRaised ? 'hand-raised' : 'hand-unraised'
        });
        dispatch(participantSlice_1.raiseHandsAction());
    };
    const getPermissionMessage = (deviceType, permission, devices) => {
        let message = '';
        if (permission === participantSlice_1.permissionEnum.DENIED) {
            message = `${deviceType} permission denied. To enable please click on the lock icon besides the addresss bar.`;
        }
        else if (devices.length === 0) {
            message = `No ${deviceType} devices found.`;
        }
        else if (permission === participantSlice_1.permissionEnum.FAILED)
            message = `Error occured in getting ${deviceType}.`;
        return message;
    };
    const screenshareButton = [
        sessionConfig.theme.control_bar.elements.screenshare &&
            sessionConfig.permissions.produce.screenshare &&
            selfRequestToJoinType !== participantSlice_1.RequestToJoinType.ask &&
            env_1.DYTE_DEV_MODE
            ? {
                icon: sharingScreen ? 'stop-screen-share' : 'screen-share',
                label: sharingScreen ? 'Stop Sharing' : 'Share Screen',
                onClick: screenShareHandler,
                disabled: !screensShareAllowed,
            }
            : {},
    ];
    const chatButton = [
        sessionConfig.theme.control_bar.elements.chat
            ? {
                icon: 'chat',
                label: 'Chat',
                mainComponent: react_1.default.createElement(MobileChatTab_1.default, null),
                disabled: false,
            }
            : {},
    ];
    const pollButton = [
        sessionConfig.theme.control_bar.elements.polls
            ? {
                icon: 'poll',
                label: 'Polls',
                mainComponent: react_1.default.createElement(PollsTab_1.default, null),
                disabled: false,
            }
            : {},
    ];
    const handRaiseButton = [
        handRaisedEnabled ? {
            icon: getHandRaiseIcon(),
            label: getHandRaiseLabel(),
            onClick: onHandRaiseClicked,
        } : {}
    ];
    const participantsButton = [
        sessionConfig.theme.control_bar.elements.participants
            ? {
                icon: 'groups',
                label: 'Participants',
                mainComponent: react_1.default.createElement(ParticipantsTab_1.default, null),
                disabled: false,
            }
            : {},
    ];
    const recordingButton = [
        ((_a = sessionConfig.permissions) === null || _a === void 0 ? void 0 : _a.can_record) ? {
            disabled: recordingLoading,
            onClick: onRecordButtonClicked,
            icon: getRecordingIcon(),
            label: getRecordingLabel(),
        }
            : {},
    ];
    const muteAllButton = [
        ((_b = sessionConfig.permissions) === null || _b === void 0 ? void 0 : _b.can_allow_participant_audio) ? {
            icon: 'voice-off',
            label: 'Mute all',
            disabled: false,
            drawerComponent: (react_1.default.createElement(StageControlButton_1.MakeMenu, { menu: [
                    {
                        title: 'Mute all',
                        options: [
                            {
                                key: 'mute-video',
                                value: 'video',
                                children: 'Mute Video',
                            },
                            {
                                key: 'mute-audio',
                                value: 'audio',
                                children: 'Mute Audio',
                            },
                        ],
                        defaultValue: null,
                        onChange: (value) => {
                            if (value === 'video') {
                                mediaRoom.muteAllVideo();
                            }
                            if (value === 'audio') {
                                mediaRoom.muteAll(true);
                            }
                            setDrawerExpander(false);
                            setopenedTab(null);
                        },
                    },
                ] })),
        }
            : {},
    ];
    const handleRequestToJoin = (selectedOption) => {
        if (joinToStageState === participantSlice_1.RequestToJoinStageState.ACCEPTED) {
            setShowDropFromState(true);
        }
        else {
            dispatch(participantSlice_1.requestedJoinToStageState(participantSlice_1.RequestToJoinStageState.INITIATED));
            dispatch(participantSlice_1.requestToJoinType(selectedOption.value));
        }
    };
    const handlePresentAction = () => {
        if (webinarHiddenParticipant) {
            dispatch(participantSlice_1.initiatePresenting());
        }
        else {
            setShowDropFromState(true);
        }
    };
    const renderStageControlExpandBtn = () => {
        if (mobileLandscape && react_native_1.Platform.OS === 'ios')
            return null;
        return (react_1.default.createElement(StageControlButton_1.StageControlButton, { onClick: () => {
                setDrawerExpander(!drawerExpanded);
                /* setDrawerState(!isDrawerOpen); */
            }, icon: react_1.default.createElement(components_1.Flex, null,
                react_1.default.createElement(components_1.Icon, { boxSize: 24, name: drawerExpanded ? 'expand-more' : 'expand-less', fill: gray }),
                react_1.default.createElement(components_1.Box, { position: "absolute", top: -5, zIndex: 25, right: -5 }, unReadNotificationsLength !== 0 && (react_1.default.createElement(notificationCircle_1.default, { color: colors.primary['500'], number: unReadNotificationsLength })))), variant: "primaryDefault", label: "More" }));
    };
    // If roomview type is meeting, hide drop from state modal
    react_1.useEffect(() => {
        if (roomViewType !== src_1.DyteViewTypes.webinar && showDropFromStageModal) {
            setShowDropFromState(false);
        }
    }, [roomViewType]);
    const handleRequestToJoinButtonColor = () => {
        if (joinToStageState === participantSlice_1.RequestToJoinStageState.ACCEPTED)
            return red;
        if (joinToStageState === participantSlice_1.RequestToJoinStageState.WAITING)
            return disabledGray;
        return gray;
    };
    return (react_1.default.createElement(components_1.Box, Object.assign({ height: 54, width: width }, mobileLandscapeProps, { alignSelf: "flex-start", justify: "flex-start", pt: 3, bg: "secondary.1000" }),
        react_1.default.createElement(components_1.Flex, { justify: "center", direction: "row" },
            react_1.default.createElement(components_1.Flex, { direction: "row", borderRadius: borderRadius_1.default.medium, bg: "secondary.800" },
                mobileLandscape && renderStageControlExpandBtn(),
                roomViewType === src_1.DyteViewTypes.webinar &&
                    (((_c = sessionConfig.permissions) === null || _c === void 0 ? void 0 : _c.can_present) ||
                        (((_d = sessionConfig.permissions) === null || _d === void 0 ? void 0 : _d.request_produce) &&
                            joinToStageState ===
                                participantSlice_1.RequestToJoinStageState.ACCEPTED &&
                            presentingState ===
                                participantSlice_1.PresentingState.NOT_PRESENTING)) && (react_1.default.createElement(StageControlButton_1.StageControlButton, { onClick: handlePresentAction, icon: react_1.default.createElement(components_1.Icon, { boxSize: 24, name: webinarHiddenParticipant
                            ? 'present-to-all'
                            : 'cancel-presentation', fill: webinarHiddenParticipant
                            ? 'green'
                            : 'red' }), label: webinarHiddenParticipant
                        ? 'Present'
                        : 'Stop' })),
                ((_e = sessionConfig.permissions) === null || _e === void 0 ? void 0 : _e.request_produce) && (react_1.default.createElement(StageControlButton_1.StageControlButton, { onClick: handleRequestToJoin, icon: react_1.default.createElement(components_1.Icon, { boxSize: 24, name: joinToStageState ===
                            participantSlice_1.RequestToJoinStageState.ACCEPTED
                            ? 'cancel-presentation'
                            : 'pan-tool', fill: handleRequestToJoinButtonColor() }), 
                    /* fullMenu={joinToStageState !== RequestToJoinStageState.ACCEPTED}
                        fullMenuOptions={sessionConfig.permissions?.request_produce
                            && sessionConfig.theme?.pip_mode ? [{
                                key: RequestToJoinType.present,
                                value: RequestToJoinType.present,
                                label: 'Request to Present',
                            }, {
                                key: RequestToJoinType.ask,
                                value: RequestToJoinType.ask,
                                label: 'Ask a question',
                            }] : [{
                                key: RequestToJoinType.present,
                                value: RequestToJoinType.present,
                                label: 'Request to Present',
                            }]} */
                    disabled: joinToStageState ===
                        participantSlice_1.RequestToJoinStageState.WAITING, label: joinToStageState ===
                        participantSlice_1.RequestToJoinStageState.ACCEPTED
                        ? 'Drop'
                        : 'Request' })),
                !webinarHiddenParticipant && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(StageControlButton_1.StageControlButton, { disabled: !audioButtonsEnabled, onClick: toggleAudioState, icon: !audioMuted && (selfPeer === null || selfPeer === void 0 ? void 0 : selfPeer.audioTrack) ? (react_1.default.createElement(components_1.Icon, { name: "mic", fill: gray, boxSize: 24 })) : (react_1.default.createElement(components_1.Icon, { name: "mic-off", fill: !audioButtonsEnabled
                                ? 'secondary.700'
                                : red, boxSize: 24 })), label: !audioMuted && audioTrack
                            ? 'Mic On'
                            : 'Mic Off', ariaLabel: "mute-toggle", menu: audioInputDevices.length > 0
                            ? [
                                {
                                    title: 'Input Microphone Device',
                                    options: audioInputDevices.map((dev, index) => ({
                                        children: dev.label ||
                                            `Input ${index + 1}`,
                                        key: dev.deviceId ||
                                            toolkit_1.nanoid(),
                                        value: dev.deviceId,
                                    })),
                                    defaultValue: audioTrackSelection === null || audioTrackSelection === void 0 ? void 0 : audioTrackSelection.selectedDeviceId,
                                    onChange: onAudioInputChange,
                                },
                            ]
                            : [] }),
                    react_1.default.createElement(StageControlButton_1.StageControlButton, { disabled: !videoButtonsEnabled, onClick: toggleVideoState, icon: videoOff ? (react_1.default.createElement(components_1.Icon, { name: "videocam-off", fill: !videoButtonsEnabled
                                ? 'secondary.700'
                                : red, boxSize: 24 })) : (react_1.default.createElement(components_1.Icon, { name: "videocam", fill: gray, boxSize: 24 })), label: !videoOff ? 'Video On' : 'Video Off', ariaLabel: "camera-toggle", menu: videoInputDevices.length > 0
                            ? [
                                {
                                    title: 'Camera Device',
                                    options: videoInputDevices.map((dev, index) => ({
                                        children: (react_1.default.createElement(react_1.default.Fragment, null, dev.label ||
                                            `Camera ${index +
                                                1}`)),
                                        key: dev.deviceId ||
                                            toolkit_1.nanoid(),
                                        value: dev.deviceId,
                                    })),
                                    defaultValue: videoTrackSelection === null || videoTrackSelection === void 0 ? void 0 : videoTrackSelection.selectedDeviceId,
                                    onChange: onVideoInputChange,
                                },
                            ]
                            : [] }))),
                sessionConfig.theme.control_bar.elements.chat && (react_1.default.createElement(StageControlButton_1.StageControlButton, { onClick: () => {
                        setDrawerExpander(true);
                        setopenedTab('chat');
                    }, icon: react_1.default.createElement(components_1.Flex, null,
                        react_1.default.createElement(components_1.Icon, { boxSize: 24, name: "chat", fill: gray }),
                        unReadChatMessages &&
                            unReadChatMessages.length > 0 && (react_1.default.createElement(components_1.Box, { position: "absolute", top: -8, zIndex: 25, right: unReadChatMessages.length >
                                9
                                ? -10
                                : -6 },
                            react_1.default.createElement(notificationCircle_1.default, { color: colors.primary['500'], number: unReadNotificationsLength })))), label: "chat" })),
                react_1.default.createElement(StageControlButton_1.StageControlButton, { onClick: leaveCall, icon: react_1.default.createElement(components_1.Icon, { name: "call-end", fill: red, boxSize: 24 }), label: "Leave" }),
                !mobileLandscape && renderStageControlExpandBtn()),
            drawerExpanded && (react_1.default.createElement(MobileDrawer_1.default, { unReadChatMessages: unReadChatMessages, unSeenPolls: unSeenPolls, webinarUnseenRequest: newParticipantRequest, options: [
                    ...handRaiseButton,
                    {
                        icon: 'mic-external-on',
                        label: 'Audio',
                        disabled: false,
                        drawerComponent: (react_1.default.createElement(StageControlButton_1.MakeMenu, { menu: audioInputDevices.length > 0
                                ? [
                                    {
                                        title: 'Audio Device',
                                        options: audioInputDevices.map((dev, index) => ({
                                            children: dev.label ||
                                                `Input ${index +
                                                    1}`,
                                            key: dev.deviceId ||
                                                toolkit_1.nanoid(),
                                            value: dev.deviceId,
                                        })),
                                        defaultValue: audioTrackSelection === null || audioTrackSelection === void 0 ? void 0 : audioTrackSelection.selectedDeviceId,
                                        onChange: onAudioInputChange,
                                    },
                                ]
                                : [] })),
                    },
                    {
                        icon: 'flip-camera-ios',
                        label: 'Camera',
                        disabled: !videoAllowed,
                        drawerComponent: (react_1.default.createElement(StageControlButton_1.MakeMenu, { menu: videoInputDevices.length > 0
                                ? [
                                    {
                                        title: 'Camera Device',
                                        options: videoInputDevices.map((dev, index) => ({
                                            children: processLabel(dev),
                                            key: dev.deviceId ||
                                                toolkit_1.nanoid(),
                                            value: dev.deviceId,
                                        })),
                                        defaultValue: videoTrackSelection === null || videoTrackSelection === void 0 ? void 0 : videoTrackSelection.selectedDeviceId,
                                        onChange: onVideoInputChange,
                                    },
                                ]
                                : [] })),
                    },
                    ...chatButton,
                    ...pollButton,
                    ...participantsButton,
                    ...screenshareButton,
                    ...recordingButton,
                    ...muteAllButton,
                ]
                    .concat(extraButtons)
                    .filter((el) => !(react_native_1.Platform.OS === 'ios' &&
                    el.icon === 'screen-share') && Object.keys(el).length !== 0)
                    .map((el) => (Object.assign(Object.assign({}, el), { id: el.label.split(' ').join('-').toLowerCase() }))) }))),
        react_1.default.createElement(DropFromStage_1.default, { onClose: () => setShowDropFromState(false), isOpen: showDropFromStageModal })));
};
exports.default = react_1.default.memo(_StageControlBar);
//# sourceMappingURL=StageControlBar.js.map