// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { DefaultButton, PrimaryButton, Stack, useTheme } from '@fluentui/react';
import { _DrawerMenu, Announcer } from "../../../../react-components/src";
import copy from 'copy-to-clipboard';
import { useMemo, useState } from 'react';
import { CallWithChatCompositeIcon } from './icons';
import { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';
import { CallingDialpad } from './CallingDialpad';
import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs-ui-common/src";
import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';
import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
import { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';
import { useId } from '@fluentui/react-hooks';
import { CalloutWithIcon } from './CalloutWithIcon';
/** @private */
export const AddPeopleDropdown = (props) => {
    var _a, _b;
    const theme = useTheme();
    const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId, onCopyInviteLink, inviteLinkCopiedRecently } = props;
    const [showDialpad, setShowDialpad] = useState(false);
    const [announcerStrings, setAnnouncerStrings] = useState();
    const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);
    const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);
    const defaultMenuProps = useMemo(() => {
        const menuProps = {
            styles: menuStyleThemed,
            items: [],
            useTargetWidth: true,
            calloutProps: {
                preventDismissOnEvent
            },
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            onMenuOpened(contextualMenu) {
                setAnnouncerStrings(undefined);
            }
        };
        if (inviteLink) {
            menuProps.items.push({
                key: 'InviteLinkKey',
                text: strings.copyInviteLinkButtonLabel,
                itemProps: {
                    styles: copyLinkButtonStylesThemed
                },
                iconProps: {
                    iconName: 'Link',
                    style: iconStyles
                },
                onClick: () => {
                    setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
                    copy(inviteLink);
                    onCopyInviteLink === null || onCopyInviteLink === void 0 ? void 0 : onCopyInviteLink();
                }
            });
        }
        // only show the dialpad option when alternateCallerId is set
        if (alternateCallerId) {
            menuProps.items.push({
                key: 'DialpadKey',
                text: strings.openDialpadButtonLabel,
                itemProps: {
                    styles: copyLinkButtonStylesThemed
                },
                iconProps: {
                    iconName: 'PeoplePaneOpenDialpad',
                    style: iconStyles
                },
                onClick: () => setShowDialpad(true),
                'data-ui-id': 'call-dial-phone-number-button'
            });
        }
        return menuProps;
    }, [menuStyleThemed, inviteLink, alternateCallerId, strings.copyInviteLinkButtonLabel, strings.copyInviteLinkActionedAriaLabel, strings.openDialpadButtonLabel, copyLinkButtonStylesThemed, onCopyInviteLink]);
    const onDismissDialpad = () => {
        setShowDialpad(false);
    };
    const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState([]);
    const setDrawerMenuItemsForAddPeople = useMemo(() => {
        return () => {
            const drawerMenuItems = defaultMenuProps.items.map((contextualMenu) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([])));
            setAddPeopleDrawerMenuItems(drawerMenuItems);
        };
    }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);
    const calloutButtonId = useId('callout-button');
    if (mobileView) {
        return React.createElement(Stack, null,
            React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
            defaultMenuProps.items.length > 0 && React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
                React.createElement(PrimaryButton, { autoFocus: true, id: calloutButtonId, onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "PeoplePaneAddPerson" }), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" }),
                inviteLinkCopiedRecently && React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: (_a = strings.copyInviteLinkButtonActionedLabel) !== null && _a !== void 0 ? _a : '', doNotLayer: true })),
            addPeopleDrawerMenuItems.length > 0 && React.createElement(Stack, { styles: drawerContainerStyles(), "data-ui-id": "call-add-people-dropdown" },
                React.createElement(_DrawerMenu, { disableMaxHeight: true, onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems })),
            alternateCallerId && React.createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }));
    }
    return React.createElement(React.Fragment, null, React.createElement(Stack, null,
        React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
        alternateCallerId && React.createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }),
        defaultMenuProps.items.length > 0 && React.createElement(Stack, { styles: copyLinkButtonStackStyles },
            React.createElement(DefaultButton, { id: calloutButtonId, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "PeoplePaneAddPerson" }), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" }),
            inviteLinkCopiedRecently && React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: (_b = strings.copyInviteLinkButtonActionedLabel) !== null && _b !== void 0 ? _b : '' }))));
};
//# sourceMappingURL=AddPeopleDropdown.js.map