// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, DefaultButton, PrimaryButton, Stack, useTheme } from '@fluentui/react';
import copy from 'copy-to-clipboard';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { CallWithChatCompositeIcon } from './icons';
import { peoplePaneContainerTokens } from './styles/ParticipantContainer.styles';
import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles, copyLinkButtonStyles, linkIconStyles, themedCopyLinkButtonStyles } from './styles/PeoplePaneContent.styles';
import { AddPeopleDropdown } from './AddPeopleDropdown';
import { Announcer } from "../../../../react-components/src";
import { useId } from '@fluentui/react-hooks';
import { CalloutWithIcon } from './CalloutWithIcon';
/** @private */
export const AddPeopleButton = (props) => {
    const { inviteLink, mobileView, strings, participantList } = props;
    const theme = useTheme();
    const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState('');
    const copyLinkButtonStylesThemed = useMemo(() => concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles(mobileView, theme)), [mobileView, theme]);
    /**
     * sets the announcement string for when the link is copied.
     */
    const toggleAnnouncerString = useCallback(() => {
        setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
        /**
         * Clears the announcer string after the user clicks the
         * copyInviteLink button allowing it to be re-announced.
         */
        setTimeout(() => {
            setCopyInviteLinkAnnouncerStrings('');
        }, 3000);
    }, [strings.copyInviteLinkActionedAriaLabel]);
    const dateInviteLinkCopied = useRef(undefined);
    const [inviteLinkCopiedRecently, setInviteLinkCopiedRecently] = useState(false);
    const onCopyInviteLink = useCallback(() => {
        setInviteLinkCopiedRecently(true);
        dateInviteLinkCopied.current = Date.now();
        setTimeout(() => {
            if (dateInviteLinkCopied.current && Date.now() - dateInviteLinkCopied.current >= 2000) {
                setInviteLinkCopiedRecently(false);
            }
        }, 2000);
    }, [setInviteLinkCopiedRecently, dateInviteLinkCopied]);
    const calloutButtonId = useId('callout-button');
    if (mobileView) {
        return React.createElement(AddPeopleDropdown, { strings: Object.assign({}, strings), mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId, onCopyInviteLink: onCopyInviteLink, inviteLinkCopiedRecently: inviteLinkCopiedRecently });
    }
    else {
        return React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
            React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId, onCopyInviteLink: onCopyInviteLink, inviteLinkCopiedRecently: inviteLinkCopiedRecently }),
            React.createElement(Stack.Item, { grow: true, styles: {
                    root: {
                        overflowY: 'hidden'
                    }
                } }, participantList));
    }
    if (mobileView) {
        return React.createElement(Stack, null, inviteLink && React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
            React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
            React.createElement(PrimaryButton, { id: calloutButtonId, onClick: () => {
                    copy(inviteLink !== null && inviteLink !== void 0 ? inviteLink : '');
                    toggleAnnouncerString();
                    onCopyInviteLink();
                }, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), text: strings.copyInviteLinkButtonLabel }),
            inviteLinkCopiedRecently && React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel, doNotLayer: true })));
    }
    else {
        return React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content", verticalFill: true },
            inviteLink && React.createElement(Stack, { styles: copyLinkButtonStackStyles },
                React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
                React.createElement(DefaultButton, { id: calloutButtonId, text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => {
                        copy(inviteLink !== null && inviteLink !== void 0 ? inviteLink : '');
                        toggleAnnouncerString();
                        onCopyInviteLink();
                    }, styles: copyLinkButtonStylesThemed }),
                inviteLinkCopiedRecently && React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: strings.copyInviteLinkButtonActionedLabel })),
            React.createElement(Stack.Item, { grow: true, styles: {
                    root: {
                        overflowY: 'hidden'
                    }
                } }, participantList));
    }
};
//# sourceMappingURL=AddPeopleButton.js.map