var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback } from 'react';
import { useMemo } from 'react';
import { Modal, Stack, useTheme, Text, IconButton, DefaultButton, PrimaryButton } from '@fluentui/react';
import { buttonsContainerClassName, buttonStyles, defaultButtonStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
import { useLocale } from '../localization';
/**
 * @public
 * a component for realTimeText modal
 */
export const RealTimeTextModal = (props) => {
    const { showModal, onDismissModal, onStartRealTimeText } = props;
    const localeStrings = useLocale().strings.realTimeTextModal;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const theme = useTheme();
    const onDismiss = useCallback(() => {
        if (onDismissModal) {
            onDismissModal();
        }
    }, [onDismissModal]);
    const onConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        if (onStartRealTimeText) {
            yield onStartRealTimeText();
        }
        onDismiss();
    }), [onDismiss, onStartRealTimeText]);
    const RealTimeTextModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: RealTimeTextModalStyle },
        React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
            React.createElement(Text, { role: "heading", className: titleClassName, "aria-level": 1 }, strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalTitle),
            React.createElement(IconButton, { iconProps: {
                    iconName: 'Cancel'
                }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.realTimeTextCloseModalButtonAriaLabel, onClick: onDismiss, style: {
                    color: theme.palette.black
                } })),
        React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalText),
        React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
            React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm, "data-ui-id": "realTimeText-modal-confirm-button" },
                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextConfirmButtonLabel)),
            React.createElement(DefaultButton, { onClick: onDismiss, styles: defaultButtonStyles() },
                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextCancelButtonLabel)))));
};
//# sourceMappingURL=RealTimeTextModal.js.map