// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';
import { useTheme } from "../../../../react-components/src";
import React, { useMemo, useCallback } from 'react';
import { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';
import { mobilePaneBackButtonStyles, mobilePaneButtonStyles, mobilePaneControlBarStyle, mobilePaneHiddenIconStyles } from './styles/Pane.styles';
import { CallWithChatCompositeIcon } from './icons';
/**
 * @private
 */
export const SidePaneHeader = (props) => {
    const theme = useTheme();
    const sidePaneCloseButtonStyles = useMemo(() => ({
        root: {
            minWidth: '1.5rem',
            padding: '0.5rem 0.25rem',
            marginRight: '0.25rem',
            backgroundColor: theme.semanticColors.bodyBackground,
            '@media (forced-colors: active)': {
                border: `0.1rem solid ${theme.palette.neutralSecondary}`,
                borderRadius: theme.effects.roundedCorner4
            }
        },
        icon: {
            color: theme.palette.neutralSecondary
        },
        iconHovered: {
            color: theme.palette.neutralSecondary
        },
        iconPressed: {
            color: theme.palette.neutralSecondary
        }
    }), [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground, theme.effects.roundedCorner4]);
    const handleShiftTab = useCallback((event) => {
        var _a, _b;
        if (event.key === 'Tab' && event.shiftKey && !props.chatButtonPresent) {
            (_b = (_a = props.paneOpenerButton) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
            event.preventDefault();
        }
    }, [props.chatButtonPresent, props.paneOpenerButton]);
    if (props.mobileView) {
        return React.createElement(SidePaneMobileHeader, Object.assign({}, props));
    }
    return React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
        React.createElement(Stack.Item, { role: "heading", styles: sidePaneHeaderStyles, "aria-label": props.headingText, "aria-level": 2 }, props.headingText),
        React.createElement(Stack.Item, null,
            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: {
                    iconName: 'cancel'
                }, onClick: () => {
                    var _a, _b;
                    props.onClose();
                    (_b = (_a = props.paneOpenerButton) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
                }, onKeyDown: handleShiftTab, componentRef: props.dismissButtonComponentRef })));
};
const SidePaneMobileHeader = (props) => {
    const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;
    const theme = useTheme();
    const mobilePaneButtonStylesThemed = useMemo(() => {
        return concatStyleSets(mobilePaneButtonStyles, {
            root: {
                width: '100%'
            },
            label: {
                fontSize: theme.fonts.medium.fontSize,
                fontWeight: theme.fonts.medium.fontWeight
            }
        });
    }, [theme]);
    return React.createElement(Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
        React.createElement(DefaultButton, { ariaLabel: dismissSidePaneButtonAriaLabel, ariaDescription: dismissSidePaneButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
        React.createElement(Stack.Item, { grow: true },
            React.createElement(DefaultButton, { checked: true, styles: mobilePaneButtonStylesThemed }, headingText)),
        React.createElement(DefaultButton, { styles: mobilePaneHiddenIconStyles, ariaHidden: true, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) }));
};
//# sourceMappingURL=SidePaneHeader.js.map