// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useMemo, useCallback } from 'react';
import { useTheme } from "../../../../../react-components/src";
import { _DrawerMenu as DrawerMenu } from "../../../../../react-components/src";
import { captionSettingsDrawerStyles } from './captionSettingsDrawer.styles';
import { _getKeys } from "../../../../../acs-ui-common/src";
/** @private */
export const CaptionLanguageSettingsDrawer = (props) => {
    var _a;
    const theme = useTheme();
    const onDrawerItemClick = useCallback((languageCode) => {
        props.selectLanguage(languageCode);
    }, [props]);
    const drawerItems = useMemo(() => {
        var _a;
        return _getKeys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map(languageCode => ({
            itemKey: languageCode,
            text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,
            onItemClick: () => onDrawerItemClick(languageCode),
            secondaryIconProps: props.currentLanguage === languageCode ? {
                iconName: 'Accept'
            } : undefined
        }));
    }, [props.currentLanguage, props.supportedLanguageStrings, onDrawerItemClick]);
    const sortedDrawerItems = useMemo(() => {
        const copy = [...drawerItems];
        return copy.sort((a, b) => a.text && b.text && a.text > b.text ? 1 : -1);
    }, [drawerItems]);
    return React.createElement(DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: sortedDrawerItems !== null && sortedDrawerItems !== void 0 ? sortedDrawerItems : [], onLightDismiss: () => {
            props.setCurrentLanguage(props.currentLanguage);
            props.onLightDismiss();
        }, styles: captionSettingsDrawerStyles(theme) });
};
//# sourceMappingURL=CaptionLanguageSettingsDrawer.js.map