// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
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());
    });
};
import React, { useCallback } from 'react';
import { useMemo, useState, useEffect } from 'react';
import { Modal, Stack, useTheme, Text, IconButton, Dropdown, DefaultButton, PrimaryButton } from '@fluentui/react';
import { buttonsContainerClassName, buttonStyles, defaultButtonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
import { defaultSpokenLanguage } from './utils';
import { _spokenLanguageToCaptionLanguage } from '../types';
import { _preventDismissOnEvent } from "../../../acs-ui-common/src";
import { useLocale } from '../localization';
/**
 * @public
 * a component for setting spoken languages
 */
export const CaptionsSettingsModal = (props) => {
    const { supportedSpokenLanguages, supportedCaptionLanguages, currentSpokenLanguage, currentCaptionLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onSetCaptionLanguage, onDismissCaptionsSettings, onStartCaptions, changeCaptionLanguage = false } = props;
    const theme = useTheme();
    const localeStrings = useLocale().strings.captionsSettingsModal;
    const localSpokenLanguageStrings = useLocale().strings.spokenLanguages;
    const localCaptionLanguageStrings = useLocale().strings.captionLanguages;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const spokenLanguageStrings = useMemo(() => {
        return Object.assign(Object.assign({}, localSpokenLanguageStrings), props.spokenLanguageStrings);
    }, [localSpokenLanguageStrings, props.spokenLanguageStrings]);
    const captionLanguageStrings = useMemo(() => {
        return Object.assign(Object.assign({}, localCaptionLanguageStrings), props.captionLanguageStrings);
    }, [localCaptionLanguageStrings, props.captionLanguageStrings]);
    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
    const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState({
        key: currentSpokenLanguage || defaultSpokenLanguage,
        text: currentSpokenLanguage || defaultSpokenLanguage
    });
    const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState({
        key: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
        text: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
    });
    useEffect(() => {
        // set spoken language when start captions with a spoken language specified.
        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
        if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {
            onSetSpokenLanguage(selectedSpokenLanguage.key);
            // we only need to call set spoken language once when first starting captions
            setHasSetSpokenLanguage(true);
        }
    }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedSpokenLanguage.key, hasSetSpokenLanguage]);
    const onDismiss = useCallback(() => {
        if (onDismissCaptionsSettings) {
            onDismissCaptionsSettings();
        }
    }, [onDismissCaptionsSettings]);
    const onConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        const spokenLanguageCode = selectedSpokenLanguage.key;
        const captionLanguageCode = selectedCaptionLanguage.key;
        if (isCaptionsFeatureActive) {
            onSetSpokenLanguage(spokenLanguageCode);
            if (changeCaptionLanguage) {
                onSetCaptionLanguage && onSetCaptionLanguage(captionLanguageCode);
            }
        }
        else {
            yield onStartCaptions({
                spokenLanguage: spokenLanguageCode
            });
        }
        onDismiss();
    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onSetCaptionLanguage, onStartCaptions, selectedSpokenLanguage.key, selectedCaptionLanguage.key, changeCaptionLanguage]);
    const spokenLanguageDropdownOptions = useMemo(() => {
        return supportedSpokenLanguages.map(languageCode => {
            return {
                key: languageCode,
                text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode
            };
        });
    }, [supportedSpokenLanguages, spokenLanguageStrings]);
    const captionLanguageDropdownOptions = useMemo(() => {
        return supportedCaptionLanguages === null || supportedCaptionLanguages === void 0 ? void 0 : supportedCaptionLanguages.map(languageCode => {
            return {
                key: languageCode,
                text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode
            };
        });
    }, [supportedCaptionLanguages, captionLanguageStrings]);
    const sortedSpokenLanguageDropdownOptions = useMemo(() => {
        const copy = [...spokenLanguageDropdownOptions];
        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
    }, [spokenLanguageDropdownOptions]);
    const sortedCaptionLanguageDropdownOptions = useMemo(() => {
        const copy = [...(captionLanguageDropdownOptions !== null && captionLanguageDropdownOptions !== void 0 ? captionLanguageDropdownOptions : [])];
        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
    }, [captionLanguageDropdownOptions]);
    const onSpokenLanguageChange = (event, option) => {
        if (option) {
            setSelectedSpokenLanguage(option);
        }
    };
    const onCaptionLanguageChange = (event, option) => {
        if (option) {
            setSelectedCaptionLanguage(option);
        }
    };
    const calloutProps = useMemo(() => ({
        preventDismissOnEvent: _preventDismissOnEvent
    }), []);
    const CaptionsSettingsComponent = useCallback(() => {
        const placeholderSpokenLanguage = currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : defaultSpokenLanguage;
        const placeholderCaptionLanguage = currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
        return React.createElement(Stack, null,
            React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: (ev, option) => onSpokenLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
            React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
            changeCaptionLanguage && React.createElement(React.Fragment, null,
                React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: (ev, option) => onCaptionLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
                React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)));
    }, [calloutProps, currentSpokenLanguage, currentCaptionLanguage, sortedSpokenLanguageDropdownOptions, sortedCaptionLanguageDropdownOptions, selectedCaptionLanguage, selectedSpokenLanguage, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText, theme, changeCaptionLanguage]);
    const CaptionsSettingsModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
        React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
            React.createElement(Text, { className: titleClassName, role: "heading", "aria-level": 1 }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
            React.createElement(IconButton, { iconProps: {
                    iconName: 'Cancel'
                }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: {
                    color: theme.palette.black
                } })),
        React.createElement(Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
        React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
            React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
            React.createElement(DefaultButton, { onClick: onDismiss, styles: defaultButtonStyles() },
                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel)))));
};
//# sourceMappingURL=CaptionsSettingsModal.js.map