// 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 { ControlBarButton } from './ControlBarButton';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
import { defaultSpokenLanguage } from './utils';
import { useLocale } from '../localization';
/**
 * a button to start or stop captions
 *
 * Can be used with {@link ControlBar}
 *
 * @param props - properties for the start captions button.
 * @public
 */
export const StartCaptionsButton = (props) => {
    const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage } = props;
    const localeStrings = useLocale().strings.startCaptionsButton;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const onRenderStartIcon = () => {
        return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "CaptionsIcon" });
    };
    const onRenderOffIcon = () => {
        return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "CaptionsOffIcon" });
    };
    const options = useMemo(() => {
        return {
            spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage
        };
    }, [currentSpokenLanguage]);
    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
    const onToggleStartCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        if (props.checked) {
            onStopCaptions();
        }
        else {
            yield onStartCaptions(options);
        }
    }), [props.checked, onStartCaptions, onStopCaptions, options]);
    useEffect(() => {
        if (props.checked && !hasSetSpokenLanguage) {
            // 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
            onSetSpokenLanguage(options.spokenLanguage);
            // we only need to call set spoken language once when first starting captions
            setHasSetSpokenLanguage(true);
        }
    }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);
    return React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleStartCaptions !== null && onToggleStartCaptions !== void 0 ? onToggleStartCaptions : props.onClick, onRenderOnIcon: onRenderStartIcon, onRenderOffIcon: onRenderOffIcon }));
};
//# sourceMappingURL=StartCaptionsButton.js.map