// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { participantListContainerStyle, participantListMobileStyle, participantListStack, participantListStyle, participantListWrapper, displayNameStyles, headingMoreButtonStyles } from './styles/ParticipantContainer.styles';
import { ParticipantList } from "../../../../react-components/src";
import { Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';
import { DefaultButton } from '@fluentui/react';
import { AvatarPersona } from './AvatarPersona';
import { useId } from '@fluentui/react-hooks';
import { _formatString } from "../../../../acs-ui-common/src";
/**
 * @private
 */
export const ParticipantContainer = (props) => {
    const theme = useTheme();
    const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);
    return React.createElement(Stack, { className: participantListWrapperClassName },
        React.createElement(ParticipantListWithHeading, Object.assign({}, props)));
};
/**
 * @private
 */
export const ParticipantListWithHeading = (props) => {
    const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, title, participantListProps, headingMoreButtonAriaLabel, onClickHeadingMoreButton, headingMoreButtonMenuProps, pinnedParticipants } = props;
    const subheadingUniqueId = useId();
    const theme = useTheme();
    const tooltipId = getId('text-tooltip');
    const subheadingStyleThemed = useMemo(() => ({
        root: {
            h2: {
                color: theme.palette.neutralSecondary,
                margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',
                fontSize: theme.fonts.smallPlus.fontSize,
                fontWeight: 'normal'
            }
        }
    }), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);
    return React.createElement(Stack, { className: participantListStack },
        React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
            React.createElement(Stack.Item, { grow: true, styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId },
                React.createElement("h2", null, paneTitleTrampoline(title !== null && title !== void 0 ? title : ''))),
            (onClickHeadingMoreButton || (headingMoreButtonMenuProps === null || headingMoreButtonMenuProps === void 0 ? void 0 : headingMoreButtonMenuProps.items) && headingMoreButtonMenuProps.items.length > 0) && React.createElement(Stack.Item, null,
                React.createElement(DefaultButton, { "data-ui-id": "people-pane-header-more-button", ariaLabel: headingMoreButtonAriaLabel, styles: headingMoreButtonStyles(theme), iconProps: {
                        iconName: 'PeoplePaneMoreButton'
                    }, onClick: onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined, menuProps: props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps, onRenderMenuIcon: () => null }))),
        React.createElement(Stack, { className: participantListContainerStyle },
            React.createElement(ParticipantList, Object.assign({}, participantListProps, { pinnedParticipants: pinnedParticipants, styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => React.createElement(React.Fragment, null,
                    React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text), dataProvider: onFetchAvatarPersonaData, allowActiveBorder: true })),
                    (options === null || options === void 0 ? void 0 : options.text) && React.createElement("div", { style: displayNameStyles },
                        React.createElement(TooltipHost, { content: options === null || options === void 0 ? void 0 : options.text, id: tooltipId, overflowMode: TooltipOverflowMode.Parent },
                            React.createElement(Text, { nowrap: false, "aria-labelledby": tooltipId }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId }))));
};
const paneTitleTrampoline = (paneTitle, totalParticipantCount) => {
    const participantCountString = totalParticipantCount ? {
        numberOfPeople: `(${totalParticipantCount})`
    } : {
        numberOfPeople: ' '
    };
    return _formatString(paneTitle, participantCountString);
};
//# sourceMappingURL=ParticipantContainer.js.map