// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useState, useEffect, useCallback } from 'react';
import { CaptionsBanner } from "../../../../react-components/src";
import { mergeStyles, Stack } from '@fluentui/react';
import { CallingCaptionsSettingsModal } from './CallingCaptionsSettingsModal';
import { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';
import { useLocale } from '../localization';
import { AvatarPersona } from './AvatarPersona';
import { usePropsFor } from '../CallComposite/hooks/usePropsFor';
const mobileViewBannerWidth = '95%';
/** @private */
export const CallingCaptionsBanner = (props) => {
    var _a;
    const captionsBannerProps = usePropsFor(CaptionsBanner);
    const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState(false);
    const onClickCaptionsSettings = () => {
        setIsCaptionsSettingsOpen(true);
    };
    const onDismissCaptionsSettings = () => {
        setIsCaptionsSettingsOpen(false);
    };
    const containerClassName = mergeStyles(((_a = props.captionsOptions) === null || _a === void 0 ? void 0 : _a.height) === 'full' ? mergeStyles({
        position: 'absolute',
        height: '100%',
        width: '100%'
    }) : {
        position: 'relative'
    });
    const floatingChildClassName = mergeStyles({
        position: 'absolute',
        right: 0,
        top: 0
    });
    const strings = useLocale().strings.call;
    const captionsBannerStrings = {
        captionsBannerSpinnerText: strings.captionsBannerSpinnerText,
        realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,
        realTimeTextInputErrorMessage: strings.realTimeTextInputErrorMessage,
        realTimeTextBannerContent: strings.realTimeTextBannerContent,
        realTimeTextBannerTitle: strings.realTimeTextBannerTitle,
        realTimeTextBannerLinkLabel: strings.realTimeTextBannerLinkLabel,
        captionsOnlyContainerTitle: strings.captionsOnlyContainerTitle,
        realTimeTextOnlyContainerTitle: strings.realTimeTextOnlyContainerTitle,
        captionsAndRealTimeTextContainerTitle: strings.captionsAndRealTimeTextContainerTitle,
        expandButtonAriaLabel: strings.expandButtonAriaLabel,
        minimizeButtonAriaLabel: strings.minimizeButtonAriaLabel
    };
    const onRenderAvatar = useCallback((userId, options) => {
        return React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }));
    }, [props.onFetchAvatarPersonaData]);
    const { innerWidth: width } = window;
    const [windowWidth, setWindowWidth] = useState(width);
    useEffect(() => {
        function handleResize() {
            setWindowWidth(window.innerWidth);
        }
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
    return React.createElement(React.Fragment, null,
        isCaptionsSettingsOpen && React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions }),
        React.createElement("div", { className: containerClassName, role: "region", "aria-label": strings.liveCaptionsLabel },
            React.createElement(Stack, { horizontalAlign: "center" },
                React.createElement(Stack.Item, { style: {
                        width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth
                    } },
                    React.createElement(CaptionsBanner, Object.assign({ captionsOptions: props.captionsOptions, onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings }, captionsBannerProps, { isRealTimeTextOn: props.isRealTimeTextOn || captionsBannerProps.isRealTimeTextOn })))),
            !props.isMobile && captionsBannerProps.isCaptionsOn && React.createElement("div", { className: floatingChildClassName },
                React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))));
};
//# sourceMappingURL=CallingCaptionsBanner.js.map