// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { DefaultButton, Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
import React, { useCallback } from 'react';
import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
/**
 * A component for displaying a Video Background Effect Option.
 *
 * @internal
 */
export const _VideoEffectsItem = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const theme = useTheme();
    const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
    const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
    const iconContainerStyles = mergeStyles({
        height: '1.25rem'
    }, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.iconContainer);
    const textContainerStyles = mergeStyles({
        height: '1.25rem',
        maxWidth: '4.5rem',
        overflow: 'hidden'
    }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
    const containerStyles = useCallback(() => videoEffectsItemContainerStyles({
        theme,
        isSelected,
        disabled,
        backgroundImage
    }), [backgroundImage, disabled, isSelected, theme]);
    return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
        React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : `${props.title}, ${(_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content}`, "aria-disabled": props.disabled, role: "radio", "aria-checked": isSelected },
                React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({
                        width: '100%'
                    }) },
                    props.iconProps && React.createElement(Stack.Item, { className: iconContainerStyles },
                        React.createElement(Icon, Object.assign({}, props.iconProps))),
                    props.title && React.createElement(Stack.Item, { className: textContainerStyles },
                        React.createElement(Text, { variant: "small", styles: {
                                root: {
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis'
                                }
                            } }, props.title))))));
};
//# sourceMappingURL=VideoEffectsItem.js.map