// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback, useMemo } from 'react';
import { Stack } from '@fluentui/react';
import { containerContextStyles, paneBodyContainer, scrollableContainer, scrollableContainerContents } from '../../../common/styles/ParticipantContainer.styles';
import { availableSpaceStyles, paneHighContrastStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';
import { useSidePaneContext } from './SidePaneProvider';
import { PeopleAndChatHeader } from '../../../common/TabHeader';
import { hiddenStyles } from '../../../common/styles/Pane.styles';
import { useTheme } from "../../../../../../react-components/src";
/** @private */
export const SidePane = (props) => {
    var _a;
    const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();
    const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;
    const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;
    const widthConstrainedStyles = useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);
    const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : widthConstrainedStyles;
    const Header = (_a = ((overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.headerRenderer)) !== null && _a !== void 0 ? _a : EmptyElement;
    /**
     * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.
     * To be removed in breaking change.
     */
    const overrideSidePaneId = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.id : undefined;
    const { updateSidePaneRenderer } = props;
    const closePane = useCallback(() => {
        updateSidePaneRenderer(undefined);
    }, [updateSidePaneRenderer]);
    const LegacyHeader = useMemo(() => {
        var _a;
        return React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat', 
            // legacy arguments to be removed in breaking change:
            disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked });
    }, [overrideSidePaneId, props.onChatButtonClicked, props.onPeopleButtonClicked, props.disablePeopleButton, props.disableChatButton, sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id, closePane]);
    const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people') ? LegacyHeader : Header();
    const ContentRenderer = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? undefined : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.contentRenderer;
    const OverrideContentRenderer = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? overrideSidePane.renderer.contentRenderer : undefined;
    const theme = useTheme();
    if (!ContentRenderer && !OverrideContentRenderer) {
        return React.createElement(EmptyElement, null);
    }
    return React.createElement(Stack, { "aria-label": props.ariaLabel, "data-is-focusable": !!props.ariaLabel, role: props.ariaLabel ? 'navigation' : undefined, tabIndex: props.ariaLabel ? 0 : undefined, verticalFill: true, grow: true, styles: paneStyles, "aria-modal": true, "data-ui-id": "SidePane", tokens: props.mobileView || !props.showAddPeopleButton && (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? {} : sidePaneTokens, className: paneHighContrastStyles(theme) },
        HeaderToRender,
        React.createElement(Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
            React.createElement(Stack, { verticalFill: true, styles: scrollableContainer },
                ContentRenderer && React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                    React.createElement(Stack, { styles: containerContextStyles }, ContentRenderer === null || ContentRenderer === void 0 ? void 0 : ContentRenderer())),
                OverrideContentRenderer && React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? hiddenStyles : scrollableContainerContents },
                    React.createElement(Stack, { styles: containerContextStyles }, OverrideContentRenderer === null || OverrideContentRenderer === void 0 ? void 0 : OverrideContentRenderer())))));
};
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => { };
const EmptyElement = () => React.createElement(React.Fragment, null);
//# sourceMappingURL=SidePane.js.map