// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { _pxToRem } from "../../../../acs-ui-common/src";
/**
 * Multiplier to convert rem units to pixels.
 */
export const REM_TO_PX_MULTIPLIER = 16;
/**
 * The travel height for reactions in Together Mode.
 * The reaction move overlay uses pixel units, so the seat position height, defined in rem, needs to be converted to pixels
 */
export const REACTION_TRAVEL_HEIGHT = 0.35 * REM_TO_PX_MULTIPLIER;
/**
 * Defines the maximum travel height for reactions in Together Mode.
 * Ensures the reaction animation does not exceed the center point from the top.
 * Since the reaction move overlay uses pixel units, the seat position height (defined in rem) must be converted to pixels.
 */
export const REACTION_MAX_TRAVEL_HEIGHT = 0.5 * REM_TO_PX_MULTIPLIER;
/**
 * The maximum width for displaying the participant's display name.
 */
export const MAX_DISPLAY_NAME_WIDTH = 150;
/**
 * Sets the seating position for a participant in Together Mode.
 *
 * @param seatingPosition - The seating position information.
 * @returns The style object for the seating position.
 */
export function setParticipantSeatingPosition(seatingPosition) {
    return {
        width: _pxToRem(seatingPosition.width),
        height: _pxToRem(seatingPosition.height),
        left: _pxToRem(seatingPosition.left),
        top: _pxToRem(seatingPosition.top)
    };
}
/**
 * Return a style bucket based on the number of active sprites.
 * For example, the first three reactions should appear at maximum
 * height, width, and opacity.
 * @private
 */
export function setTogetherModeSeatPositionStyle(seatingPosition) {
    return {
        seatPosition: setParticipantSeatingPosition(seatingPosition)
    };
}
/**
 * The style for the Together Mode meeting overlay.
 */
export const togetherModeMeetingOverlayStyle = {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: '0',
    left: '0'
};
/**
 * Generates the overlay style for a participant in Together Mode.
 *
 * @param seatingPosition - The seating position information.
 * @returns The style object for the participant overlay.
 */
export function getTogetherModeParticipantOverlayStyle(seatingPositionStyle) {
    return Object.assign(Object.assign({}, seatingPositionStyle.seatPosition), { position: 'absolute' });
}
// Function to map a value from one range to another
const mapRange = (value, inMin, inMax, outMin, outMax) => {
    return outMin + (value - inMin) * (outMax - outMin) / (inMax - inMin);
};
/**
 * Calculate the reaction emoji scaled size based on width and height of the participant seat width and height.
 * This is needed when the browser is resized and the participant seat width and height changes.
 *
 * @param width - The width of the element.
 * @param height - The height of the element.
 * @returns The scaled size.
 */
export const calculateScaledSize = (width, height) => {
    // Maximum participant seat width and height
    const maxSize = 600;
    // Minimum participant seat width and height
    const minSize = 200;
    // Minimum scaled width and height of the reaction emoji
    const minScaledSize = 35;
    // Maximum scaled width and height of the reaction emoji
    const maxScaledSize = 70;
    // Use width or height to determine scaling factor
    const size = Math.min(width, height);
    // Map the size to the desired range
    return mapRange(size, minSize, maxSize, minScaledSize, maxScaledSize);
};
/**
 * @private
 */
export const togetherModeStreamRootStyle = {
    root: {
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: 0,
        left: 0
    }
};
/**
 * @private
 */
export const togetherModeIconStyle = () => {
    return {
        width: _pxToRem(20),
        flexShrink: 0
    };
};
/**
 * The style for the container holding the display name, raiseHand, spotlight and mute icons.
 * @private
 */
export const togetherModeParticipantStatusContainer = (backgroundColor, borderRadius) => {
    return {
        backgroundColor,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: _pxToRem(2),
        margin: '0 auto',
        // Centers the container
        padding: `0 ${_pxToRem(5)}`,
        borderRadius,
        width: 'fit-content'
    };
};
/**
 * @private
 */
export const togetherModeParticipantDisplayName = (isParticipantHovered, participantSeatingWidth, color) => {
    // expands the display name width when participant is hovered or clicked on else make it 70% of the participant seating width
    const width = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER);
    // For smaller displays, the display name is hidden only participant is hovered or clicked on for mobile view
    const showDisplayName = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH ? 'inline-block' : 'none';
    return {
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        textAlign: 'center',
        color,
        overflow: isParticipantHovered ? 'visible' : 'hidden',
        width,
        display: showDisplayName,
        fontSize: `${_pxToRem(13)}`,
        lineHeight: `${_pxToRem(20)}`,
        maxWidth: isParticipantHovered ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER)
    };
};
/**
 * @private
 */
export const togetherModeParticipantEmojiSpriteStyle = (emojiSize, emojiScaledSize, participantSeatWidth) => {
    const participantSeatWidthInPixel = parseFloat(participantSeatWidth) * REM_TO_PX_MULTIPLIER;
    const emojiScaledSizeInPercent = 100 - emojiScaledSize / participantSeatWidthInPixel * 100;
    return {
        width: `${emojiSize}`,
        position: 'absolute',
        // Center the emoji sprite within the participant seat
        left: `${emojiScaledSizeInPercent / 2}%`
    };
};
/**
 * The style for the transition of the participant status container in Together Mode.
 * @private
 */
export const participantStatusTransitionStyle = {
    position: 'absolute',
    bottom: `${_pxToRem(2)}`,
    width: 'fit-content',
    textAlign: 'center',
    transform: 'translate(-50%)',
    transition: 'width 0.3s ease, transform 0.3s ease',
    left: '50%'
};
//# sourceMappingURL=TogetherMode.styles.js.map