// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Dropdown, Stack, Text, mergeStyleSets } from '@fluentui/react';
import React from 'react';
/**
 * A dropdown to trigger device permission prompt
 *
 * @internal
 */
export const _DevicePermissionDropdown = (props) => {
    const { icon, askDevicePermission, onClick, constrain, strings, options } = props;
    const onRenderPlaceholder = () => {
        return React.createElement(Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "space-between" },
            icon,
            React.createElement(Stack.Item, { styles: {
                    root: {
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        flex: 1
                    }
                } },
                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText)),
            React.createElement(Stack.Item, { shrink: 0, styles: {
                    root: {
                        paddingLeft: '0.5rem'
                    }
                } },
                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent)));
    };
    const showAsAllowPrompt = !options && !!askDevicePermission;
    const styles = mergeStyleSets(showAsAllowPrompt ? {
        title: {
            paddingRight: '0.625rem'
        }
    } : {}, props.styles);
    const click = () => {
        if (askDevicePermission) {
            void askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : {
                video: true,
                audio: true
            });
        }
        onClick === null || onClick === void 0 ? void 0 : onClick();
    };
    return React.createElement(Dropdown, { role: showAsAllowPrompt ? 'button' : undefined, "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, "aria-labelledby": props.ariaLabelledby, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: showAsAllowPrompt ? () => React.createElement(React.Fragment, null) : undefined, onClick: showAsAllowPrompt ? click : undefined, onKeyDown: showAsAllowPrompt ? e => {
            if (e.key === 'Enter' || e.key === ' ') {
                click();
            }
        } : undefined, options: options !== null && options !== void 0 ? options : [], styles: styles });
};
//# sourceMappingURL=DevicePermissionDropdown.js.map