// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { createRef, useCallback, useEffect, useMemo } from 'react';
import { useIsParticularSidePaneOpen } from './SidePaneProvider';
import { SidePaneHeader } from '../../../common/SidePaneHeader';
import { useLocale } from '../../../localization';
import { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';
import { useSelector } from '../../hooks/useSelector';
import { getVideoBackgroundImages } from '../../selectors/baseSelectors';
/** @private */
export const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';
/** @private */
export const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
/** @private */
export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError, cameraButtonRef) => {
    const closePane = useCallback(() => {
        var _a;
        updateSidePaneRenderer(undefined);
        (_a = cameraButtonRef === null || cameraButtonRef === void 0 ? void 0 : cameraButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, [cameraButtonRef, updateSidePaneRenderer]);
    const locale = useLocale();
    const onRenderHeader = useCallback(() => {
        var _a, _b;
        return React.createElement(SidePaneHeader, { onClose: closePane, headingText: locale.strings.call.videoEffectsPaneTitle, dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView });
    }, [closePane, locale.strings, mobileView]);
    const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');
    const updateFocusHandle = useMemo(() => createRef(), []);
    const backgroundImages = useSelector(getVideoBackgroundImages);
    const onRenderContent = useCallback(() => {
        return React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
                // Clear any existing video effects error when the user clicks on a new video effect
                latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
            }, updateFocusHandle: updateFocusHandle, backgroundImages: backgroundImages });
    }, [latestVideoEffectError, onDismissError, updateFocusHandle, backgroundImages]);
    const sidePaneRenderer = useMemo(() => ({
        headerRenderer: onRenderHeader,
        contentRenderer: onRenderContent,
        id: VIDEO_EFFECTS_SIDE_PANE_ID
    }), [onRenderContent, onRenderHeader]);
    const openPane = useCallback(() => {
        updateSidePaneRenderer(sidePaneRenderer);
        // Run in a setTimeout as it must be called only once the imperative handle is available
        setTimeout(() => { var _a; return (_a = updateFocusHandle.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
    }, [sidePaneRenderer, updateSidePaneRenderer, updateFocusHandle]);
    const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
    // Update pane renderer if it is open and the openPane dep changes
    useEffect(() => {
        if (isOpen) {
            openPane();
        }
    }, [isOpen, openPane]);
    const togglePane = useCallback(() => {
        if (isOpen) {
            closePane();
        }
        else {
            openPane();
        }
    }, [closePane, isOpen, openPane]);
    return {
        openVideoEffectsPane: openPane,
        closeVideoEffectsPane: closePane,
        toggleVideoEffectsPane: togglePane,
        isVideoEffectsPaneOpen: isOpen
    };
};
//# sourceMappingURL=useVideoEffectsPane.js.map