// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
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());
    });
};
import { Stack } from '@fluentui/react';
import { ParticipantList } from "../../../../react-components/src";
import React, { useCallback, useMemo } from 'react';
import { usePropsFor } from '../CallComposite/hooks/usePropsFor';
import { ParticipantListWithHeading } from '../common/ParticipantContainer';
import { peoplePaneContainerTokens } from '../common/styles/ParticipantContainer.styles';
import { participantListContainerStyles, peoplePaneContainerStyle } from './styles/PeoplePaneContent.styles';
import { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';
import { AddPeopleButton } from './AddPeopleButton';
import { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';
import { useLocale } from '../localization';
/**
 * @private
 */
export const PeoplePaneContent = (props) => {
    const { inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems, setParticipantActioned, participantListHeadingMoreButtonProps } = props;
    const adapter = useAdapter();
    const localeStrings = useLocale();
    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    const getStrings = () => {
        return localeStrings.strings.call;
    };
    const strings = getStrings();
    const removeParticipantFromCall = useCallback((participantId) => __awaiter(void 0, void 0, void 0, function* () {
        yield adapter.removeParticipant(participantId);
    }), [adapter]);
    const addParticipantToCall = useCallback((participant, options) => __awaiter(void 0, void 0, void 0, function* () {
        yield adapter.addParticipant(participant, options);
    }), [adapter]);
    const participantListDefaultProps = usePropsFor(ParticipantList);
    const removeButtonAllowed = canRemoveParticipants(props.role);
    const setDrawerMenuItemsForParticipant = useMemo(() => {
        return (participant) => {
            if (participant) {
                setParticipantActioned === null || setParticipantActioned === void 0 ? void 0 : setParticipantActioned(participant.userId);
                let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, removeButtonAllowed && participant.isRemovable ? participantListDefaultProps.onRemoveParticipant : undefined, participantListDefaultProps.myUserId);
                if (onFetchParticipantMenuItems) {
                    contextualMenuItems = onFetchParticipantMenuItems(participant.userId, participantListDefaultProps.myUserId, contextualMenuItems);
                }
                const drawerMenuItems = contextualMenuItems.map((contextualMenu) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([])));
                setDrawerMenuItems(drawerMenuItems);
            }
        };
    }, [strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId, removeButtonAllowed, onFetchParticipantMenuItems, setDrawerMenuItems, setParticipantActioned]);
    const setDrawerMenuItemsForParticipantListHeadingMoreButton = useMemo(() => {
        const drawerMenuItems = participantListHeadingMoreButtonProps === null || participantListHeadingMoreButtonProps === void 0 ? void 0 : participantListHeadingMoreButtonProps.items.map((contextualMenu) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([])));
        return drawerMenuItems && drawerMenuItems.length > 0 ? () => setDrawerMenuItems(drawerMenuItems) : undefined;
    }, [participantListHeadingMoreButtonProps === null || participantListHeadingMoreButtonProps === void 0 ? void 0 : participantListHeadingMoreButtonProps.items, setDrawerMenuItems]);
    const participantListProps = useMemo(() => {
        const onRemoveAParticipant = (participantId) => __awaiter(void 0, void 0, void 0, function* () { return removeParticipantFromCall(participantId); });
        return Object.assign(Object.assign({}, participantListDefaultProps), { 
            // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked
            onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant, 
            // We want the drawer menu items to appear when participants in ParticipantList are clicked
            onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined });
    }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, removeParticipantFromCall]);
    const participantList = React.createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.mobileView ? undefined : onFetchParticipantMenuItems, title: strings.peoplePaneSubTitle, headingMoreButtonAriaLabel: localeStrings.strings.call.peoplePaneMoreButtonAriaLabel, onClickHeadingMoreButton: props.mobileView ? setDrawerMenuItemsForParticipantListHeadingMoreButton : undefined, headingMoreButtonMenuProps: props.participantListHeadingMoreButtonProps, pinnedParticipants: props.pinnedParticipants });
    if (props.mobileView) {
        return React.createElement(Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content" },
            React.createElement(Stack.Item, { grow: true, styles: participantListContainerStyles }, participantList),
            React.createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings, onAddParticipant: addParticipantToCall, alternateCallerId: props.alternateCallerId }));
    }
    return React.createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings, onAddParticipant: addParticipantToCall, alternateCallerId: props.alternateCallerId });
};
/**
 * Create default contextual menu items for particant
 * @param participant - participant to create contextual menu items for
 * @param strings - localized strings for menu item text
 * @param onRemoveParticipant - callback to remove participant
 * @param localParticipantUserId - Local participant user id
 * @returns - IContextualMenuItem[]
 */
const createDefaultContextualMenuItems = (participant, strings, onRemoveParticipant, localParticipantUserId) => {
    const menuItems = [];
    if (onRemoveParticipant && (participant === null || participant === void 0 ? void 0 : participant.userId) !== localParticipantUserId) {
        menuItems.push({
            key: 'remove',
            text: strings.removeMenuLabel,
            role: 'menuitem',
            onClick: () => {
                if (participant === null || participant === void 0 ? void 0 : participant.userId) {
                    onRemoveParticipant === null || onRemoveParticipant === void 0 ? void 0 : onRemoveParticipant(participant === null || participant === void 0 ? void 0 : participant.userId);
                }
            },
            iconProps: {
                iconName: 'ContextMenuRemoveParticipant',
                styles: {
                    root: {
                        lineHeight: 0
                    }
                }
            },
            'data-ui-id': 'participant-list-remove-participant-button'
        });
    }
    return menuItems;
};
const canRemoveParticipants = (role) => {
    // TODO: We should be using the removeParticipant capability here but there is an SDK bug for Rooms where a
    // Presenter's removeParticipant capability is {isPresent: false, reason: 'CapabilityNotApplicableForTheCallType'}.
    // But a Presenter in Rooms should be able to remove participants according to the following documentation
    // https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#predefined-participant-roles-and-permissions
    const canRemove = role === 'Presenter' || role === 'Unknown' || role === undefined;
    return canRemove;
};
//# sourceMappingURL=PeoplePaneContent.js.map