// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Callout, concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';
import React, { useRef, useState } from 'react';
import { ControlBarButton } from './ControlBarButton';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
import { useLocale } from '../localization';
import { emojiStyles, reactionButtonCalloutStyles, reactionButtonStyles, reactionItemButtonStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';
import { isDarkThemed } from '../theming/themeUtils';
import { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';
/**
 * A button to send reactions.
 *
 * Can be used with {@link ControlBar}.
 *
 * @public
 */
export const ReactionButton = (props) => {
    var _a, _b, _c, _d, _e, _f, _g;
    const localeStrings = useLocale().strings.reactionButton;
    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
    const theme = useTheme();
    const styles = reactionButtonStyles(theme);
    const onRenderIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ReactionButtonIcon" });
    const emojis = ['like', 'heart', 'applause', 'laugh', 'surprised'];
    const emojiButtonTooltip = new Map([['like', strings.likeReactionTooltipContent], ['heart', strings.heartReactionTooltipContent], ['applause', strings.applauseReactionTooltipContent], ['laugh', strings.laughReactionTooltipContent], ['surprised', strings.surprisedReactionTooltipContent]]);
    const emojiResource = new Map([['like', (_a = props.reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url], ['heart', (_b = props.reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url], ['applause', (_c = props.reactionResources.applauseReaction) === null || _c === void 0 ? void 0 : _c.url], ['laugh', (_d = props.reactionResources.laughReaction) === null || _d === void 0 ? void 0 : _d.url], ['surprised', (_e = props.reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]]);
    const calloutStyle = {
        root: {
            padding: 0
        },
        calloutMain: {
            padding: '0.5rem'
        }
    };
    const calloutProps = {
        styles: calloutStyle,
        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
    };
    const reactionButtonCalloutRef = useRef(null);
    const reactionButtonRef = useRef(null);
    const [calloutIsVisible, setCalloutIsVisible] = useState(false);
    return React.createElement(Stack, null,
        calloutIsVisible && React.createElement(Callout, { "data-ui-id": "reaction-sub-menu", isBeakVisible: false, styles: reactionButtonCalloutStyles, target: reactionButtonCalloutRef.current, onDismiss: () => {
                var _a;
                (_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                setCalloutIsVisible(false);
            } },
            React.createElement(FocusZone, { shouldFocusOnMount: true, style: {
                    height: '100%'
                } },
                React.createElement(Stack, { horizontal: true, style: {
                        height: 'inherit'
                    } }, emojis.map((emoji, index) => {
                    const resourceUrl = emojiResource.get(emoji);
                    const frameCount = props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;
                    const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));
                    return React.createElement(TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
                        React.createElement(DefaultButton, { role: "menuitem", key: index, onClick: () => {
                                var _a;
                                props.onReactionClick(emoji);
                                (_a = reactionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                setCalloutIsVisible(false);
                            }, className: classname, styles: reactionItemButtonStyles, "aria-label": emojiButtonTooltip.get(emoji) }));
                })))),
        React.createElement("div", { ref: reactionButtonCalloutRef },
            React.createElement(ControlBarButton, Object.assign({}, props, { componentRef: reactionButtonRef, styles: concatStyleSets(styles, props.styles), onClick: () => setCalloutIsVisible(!calloutIsVisible), onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, split: true, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled, ariaLabel: strings.ariaLabel }))));
};
//# sourceMappingURL=ReactionButton.js.map