// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, DefaultButton, FocusZone, FocusZoneDirection, mergeStyles, Stack } from '@fluentui/react';
import { useTheme } from "../../../../react-components/src";
import React, { useMemo } from 'react';
import { CallWithChatCompositeIcon } from '../common/icons';
import { availableSpaceStyles, mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';
import { useLocale } from '../localization';
/**
 * Legacy header to be removed when we make a breaking change.
 * @private
 */
export const PeopleAndChatHeader = (props) => {
    const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab } = props;
    const theme = useTheme();
    const strings = useLocale().strings.call;
    const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;
    const mobilePaneButtonStylesThemed = useMemo(() => {
        return concatStyleSets(mobilePaneButtonStyles, {
            root: {
                width: '100%'
            },
            label: {
                fontSize: theme.fonts.medium.fontSize,
                fontWeight: theme.fonts.medium.fontWeight
            }
        }, haveMultipleTabs ? {
            rootChecked: {
                borderBottom: `0.125rem solid ${theme.palette.themePrimary}`
            }
        } : {});
    }, [theme, haveMultipleTabs]);
    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
        React.createElement(DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
        React.createElement(Stack.Item, { grow: true, role: "tablist" },
            React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, className: mergeStyles(availableSpaceStyles.root) },
                React.createElement(Stack, { horizontal: true, styles: availableSpaceStyles },
                    React.createElement(Stack.Item, { grow: true }, onChatButtonClicked && React.createElement(DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel)),
                    React.createElement(Stack.Item, { grow: true }, onPeopleButtonClicked && React.createElement(DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))))), /* Hidden icon to take the same space as the actual back button on the left. */
        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
};
//# sourceMappingURL=TabHeader.js.map