// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useLayoutEffect, useRef, useState } from 'react';
import { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';
import { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';
import { TogetherModeOverlay } from './TogetherModeOverlay';
import { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';
/**
 * Emoji max size
 * @internal
 */
const DEFAULT_EMOJI_MAX_SIZE_PX = 70;
/**
 * Emoji min size
 * @internal
 */
const DEFAULT_EMOJI_MIN_SIZE_PX = 32;
/**
 * Emoji resize scale constant
 * @internal
 */
const REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;
/**
 * Reaction overlay component
 *
 * Can be used with {@link VideoTile}.
 *
 * @internal
 */
export const MeetingReactionOverlay = (props) => {
    const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, togetherModeSeatPositions } = props;
    const [emojiSizePx, setEmojiSizePx] = useState(0);
    const [divHeight, setDivHeight] = useState(0);
    const [divWidth, setDivWidth] = useState(0);
    const videoTileRef = useRef(null);
    const observer = useRef(new ResizeObserver((entries) => {
        var _a;
        const domRect = (_a = entries.at(0)) === null || _a === void 0 ? void 0 : _a.contentRect;
        const width = domRect !== undefined ? domRect.width : 0;
        const height = domRect !== undefined ? domRect.height : 0;
        const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;
        // we only want to set the persona size if it has changed
        if (reactionEmojiCalcSize !== emojiSizePx) {
            setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));
        }
        if (height !== divHeight) {
            setDivHeight(height);
        }
        if (width !== divWidth) {
            setDivWidth(width);
        }
    }));
    useLayoutEffect(() => {
        if (videoTileRef.current) {
            observer.current.observe(videoTileRef.current);
        }
        const currentObserver = observer.current;
        return () => currentObserver.disconnect();
    }, [videoTileRef]);
    if (overlayMode === 'grid-tiles') {
        return React.createElement("div", { ref: videoTileRef, style: {
                width: '100%',
                height: '100%',
                pointerEvents: 'none'
            } },
            React.createElement(ParticipantVideoTileOverlay, { emojiSize: emojiSizePx, reaction: reaction, reactionResources: reactionResources }));
    }
    else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {
        return React.createElement("div", { ref: videoTileRef, style: {
                width: '100%',
                height: '100%',
                pointerEvents: 'none'
            } },
            React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants }));
    }
    else if (props.overlayMode === 'together-mode') {
        return React.createElement("div", { style: Object.assign({}, togetherModeMeetingOverlayStyle) },
            React.createElement(TogetherModeOverlay, { emojiSize: emojiSizePx, reactionResources: reactionResources, localParticipant: localParticipant !== null && localParticipant !== void 0 ? localParticipant : {}, remoteParticipants: remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : [], togetherModeSeatPositions: togetherModeSeatPositions !== null && togetherModeSeatPositions !== void 0 ? togetherModeSeatPositions : {} }));
        return React.createElement(React.Fragment, null);
    }
    else {
        return React.createElement(React.Fragment, null);
    }
};
//# sourceMappingURL=MeetingReactionOverlay.js.map