// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles, Stack } from '@fluentui/react';
import React from 'react';
import { useTheme } from '../../theming/FluentThemeProvider';
import { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';
import { IconButton } from '@fluentui/react';
/**
 * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
 *
 * @internal
 */
export const _ReactionDrawerMenuItem = (props) => {
    var _a, _b, _c, _d, _e;
    const theme = useTheme();
    const resources = props.reactionResources;
    const emojiResource = new Map([['like', (_a = resources === null || resources === void 0 ? void 0 : resources.likeReaction) === null || _a === void 0 ? void 0 : _a.url], ['heart', (_b = resources === null || resources === void 0 ? void 0 : resources.heartReaction) === null || _b === void 0 ? void 0 : _b.url], ['laugh', (_c = resources === null || resources === void 0 ? void 0 : resources.laughReaction) === null || _c === void 0 ? void 0 : _c.url], ['applause', (_d = resources === null || resources === void 0 ? void 0 : resources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url], ['surprised', (_e = resources === null || resources === void 0 ? void 0 : resources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]]);
    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
    const borderRadius = useTheme().effects.roundedCorner4;
    const modifiedFirstItemStyle = {
        root: {
            borderTopRightRadius: borderRadius,
            borderTopLeftRadius: borderRadius,
            marginTop: '12px'
        }
    };
    return React.createElement(Stack, { "data-ui-id": "reaction-mobile-drawer-menu-item", id: "reaction", role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
        React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
            const resourceUrl = emojiResource.get(emoji.toString());
            return React.createElement(IconButton, { key: index, onClick: () => {
                    var _a;
                    (_a = props.onReactionClick) === null || _a === void 0 ? void 0 : _a.call(props, emoji);
                }, style: mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running') });
        })));
};
const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
        background: hoverBackground
    } }));
const disabledDrawerMenuItemRootStyles = (background) => ({
    pointerEvents: 'none',
    background: background,
    ':hover, :focus': {
        background: background
    }
});
//# sourceMappingURL=ReactionDrawerMenuItem.js.map