// 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 { PrimaryButton, Stack, Text } from '@fluentui/react';
import React, { useRef, useState } from 'react';
import { useLocale } from '../../localization';
import { HoldButton } from "../../../../../react-components/src";
import { usePropsFor } from '../hooks/usePropsFor';
import { holdPaneContentStyles, holdPaneLabelStyles, holdPaneTimerStyles, paneStyles, resumeButtonStyles } from '../styles/HoldPane.styles';
/**
 * Hold pane to display when the user places themselves on hold
 *
 * @beta
 */
export const HoldPane = () => {
    var _a, _b, _c, _d, _e;
    const holdButtonProps = usePropsFor(HoldButton);
    const locale = useLocale();
    const strings = {
        holdScreenLabel: (_a = locale.strings.call.holdScreenLabel) !== null && _a !== void 0 ? _a : '',
        resumeCallButtonLabel: (_b = locale.strings.call.resumeCallButtonLabel) !== null && _b !== void 0 ? _b : '',
        resumeCallButtonAriaLabel: (_c = locale.strings.call.resumeCallButtonAriaLabel) !== null && _c !== void 0 ? _c : '',
        resumingCallButtonLabel: (_d = locale.strings.call.resumingCallButtonLabel) !== null && _d !== void 0 ? _d : '',
        resumingCallButtonAriaLabel: (_e = locale.strings.call.resumingCallButtonAriaLabel) !== null && _e !== void 0 ? _e : ''
    };
    const [time, setTime] = useState(0);
    const elapsedTime = getReadableTime(time);
    const startTime = useRef(performance.now());
    const [resumingCall, setResumingCall] = useState(false);
    React.useEffect(() => {
        const interval = setInterval(() => {
            setTime(performance.now() - startTime.current);
        }, 10);
        return () => {
            clearInterval(interval);
        };
    }, [startTime]);
    return React.createElement(Stack, { styles: paneStyles },
        React.createElement(Stack, { horizontal: true, styles: holdPaneContentStyles },
            React.createElement(Text, { styles: holdPaneTimerStyles }, elapsedTime),
            React.createElement(Text, { styles: holdPaneLabelStyles, role: "alert", "aria-live": "assertive" }, strings.holdScreenLabel),
            React.createElement(PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                    setResumingCall(true);
                    try {
                        yield holdButtonProps.onToggleHold();
                    }
                    catch (e) {
                        setResumingCall(false);
                        throw e;
                    }
                }), "data-ui-id": "hold-page-resume-call-button", autoFocus: true })));
};
const getMinutes = (time) => {
    return Math.floor(getSeconds(time) / 60);
};
const getSeconds = (time) => {
    return Math.floor(time / 1000);
};
const getHours = (time) => {
    return Math.floor(getMinutes(time) / 60);
};
/**
 * @internal
 */
export const getReadableTime = (time) => {
    const hours = getHours(time);
    const readableMinutes = ('0' + getMinutes(time) % 60).slice(-2);
    const readableSeconds = ('0' + getSeconds(time) % 60).slice(-2);
    return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
};
//# sourceMappingURL=HoldPane.js.map