// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { ContextualMenu, Stack } from '@fluentui/react';
import { _convertRemToPx } from "../../../../acs-ui-common/src";
import React, { useMemo } from 'react';
import { useTheme } from '../../theming';
import { _ModalClone } from '../ModalClone/ModalClone';
import { floatingLocalVideoModalStyle, floatinglocalVideoModalInitialPositionGapRem } from './styles/FloatingLocalVideo.styles';
import { useLocale } from '../../localization';
const DRAG_OPTIONS = {
    moveMenuItemText: 'Move',
    closeMenuItemText: 'Close',
    menu: ContextualMenu,
    keepInBounds: true
};
// Manually override the max position used to keep the modal in the bounds of its container.
// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
// position the modal can be dragged to.
const modalMaxDragPosition = {
    x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
    y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
};
/**
 * @private
 */
export const FloatingLocalVideo = (props) => {
    var _a;
    const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;
    const theme = useTheme();
    const strings = useLocale().strings.videoGallery;
    // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
    // to be dragged offscreen and these are the top and left bounds of that calculation.
    const modalMinDragPosition = useMemo(() => parentWidth && parentHeight ? {
        // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
        // hence (0,0) is the bottom right of the video gallery.
        x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
        y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
    } : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
    const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
    const layerProps = useMemo(() => ({
        hostId: layerHostId
    }), [layerHostId]);
    return React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition, dataUiId: "floating-local-video-host" },
        React.createElement(Stack, { "aria-label": (_a = strings.localVideoMovementAriaLabel) !== null && _a !== void 0 ? _a : strings.localVideoMovementLabel, tabIndex: 0, role: 'dialog', style: {
                pointerEvents: 'auto'
            } }, localVideoComponent));
};
//# sourceMappingURL=FloatingLocalVideo.js.map