// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { concatStyleSets, Stack } from '@fluentui/react';
import { EndCallButton } from "../../../../../../react-components/src";
import React, { useMemo } from 'react';
import { useState, useCallback } from 'react';
import { usePropsFor } from '../../hooks/usePropsFor';
import { groupCallLeaveButtonCompressedStyle, groupCallLeaveButtonStyle } from '../../styles/Buttons.styles';
import { Prompt } from '../Prompt';
import { useLocale } from '../../../localization';
/** @private */
export const EndCall = (props) => {
    var _a;
    const compactMode = props.displayType === 'compact';
    const hangUpButtonProps = usePropsFor(EndCallButton);
    const localeStrings = useLocale().strings;
    const endCallDiaglogLabels = useMemo(() => ({
        confirmButtonLabel: localeStrings.call.endCallConfirmButtonLabel,
        heading: localeStrings.call.endCallConfirmDialogTitle,
        text: localeStrings.call.leaveConfirmDialogContent,
        closeButtonLabel: localeStrings.call.close
    }), [localeStrings.call.endCallConfirmButtonLabel, localeStrings.call.endCallConfirmDialogTitle, localeStrings.call.leaveConfirmDialogContent, localeStrings.call.close]);
    const leaveDiaglogLabels = useMemo(() => ({
        confirmButtonLabel: localeStrings.call.leaveConfirmButtonLabel,
        heading: localeStrings.call.leaveConfirmDialogTitle,
        text: localeStrings.call.leaveConfirmDialogContent,
        closeButtonLabel: localeStrings.call.close
    }), [localeStrings.call.leaveConfirmButtonLabel, localeStrings.call.leaveConfirmDialogContent, localeStrings.call.leaveConfirmDialogTitle, localeStrings.call.close]);
    const [dialogLabels, setDialogLabels] = useState(leaveDiaglogLabels);
    const { onHangUp } = hangUpButtonProps;
    const [showHangUpConfirm, setShowHangUpConfirm] = React.useState(false);
    const toggleConfirm = useCallback(() => {
        setShowHangUpConfirm(!showHangUpConfirm);
    }, [showHangUpConfirm]);
    const onHangUpConfirm = useCallback((hangUpForEveryone) => {
        onHangUp && onHangUp(hangUpForEveryone);
        toggleConfirm();
    }, [onHangUp, toggleConfirm]);
    const hangUpOverride = useCallback((forEveryone) => __awaiter(void 0, void 0, void 0, function* () {
        if (props.mobileView || forEveryone === false /* value being false(not undefined) because it comes from endCall option */) {
            onHangUp();
            return;
        }
        setDialogLabels(forEveryone ? endCallDiaglogLabels : leaveDiaglogLabels);
        toggleConfirm();
    }), [endCallDiaglogLabels, leaveDiaglogLabels, onHangUp, props.mobileView, toggleConfirm]);
    const styles = useMemo(() => { var _a; return concatStyleSets(compactMode ? groupCallLeaveButtonCompressedStyle : groupCallLeaveButtonStyle, (_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [compactMode, props.styles]);
    const enableBreakoutRoomMenu = !!props.returnFromBreakoutRoom;
    const breakoutRoomMenuProps = {
        items: [{
                key: 'returnToMainMeeting',
                text: localeStrings.call.returnFromBreakoutRoomButtonLabel,
                title: localeStrings.call.returnFromBreakoutRoomButtonLabel,
                onClick: () => {
                    var _a;
                    (_a = props.returnFromBreakoutRoom) === null || _a === void 0 ? void 0 : _a.call(props);
                }
            }, {
                key: 'leaveRoomAndMainMeeting',
                text: localeStrings.call.leaveBreakoutRoomAndMeetingButtonLabel,
                title: localeStrings.call.leaveBreakoutRoomAndMeetingButtonLabel,
                onClick: () => onHangUp()
            }],
        styles: props.styles
    };
    return React.createElement(Stack, null,
        React.createElement(EndCallButton, Object.assign({ "data-ui-id": "call-composite-hangup-button" }, hangUpButtonProps, { onHangUp: props.disableEndCallModal ? onHangUp : hangUpOverride, styles: styles, showLabel: !compactMode, enableEndCallMenu: (_a = props.enableEndCallMenu) !== null && _a !== void 0 ? _a : false, menuProps: enableBreakoutRoomMenu ? breakoutRoomMenuProps : undefined })),
        React.createElement(Prompt, Object.assign({}, dialogLabels, { styles: {
                main: {
                    minWidth: '22.5rem',
                    padding: '1.5rem'
                }
            }, cancelButtonLabel: localeStrings.call.hangUpCancelButtonLabel, onConfirm: () => onHangUpConfirm(props.enableEndCallMenu), isOpen: showHangUpConfirm, onCancel: toggleConfirm })));
};
//# sourceMappingURL=EndCall.js.map