// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
// eslint-disable-next-line no-restricted-imports
import { FontIcon, Stack, Text, mergeStyles, useTheme } from '@fluentui/react';
import { _pxToRem } from "../../../../../acs-ui-common/src";
import React, { useState } from 'react';
import { getReadableTime } from '../../CallComposite/utils/timerUtils';
/**
 * @private
 */
export const Timer = (props) => {
    const { timeStampInfo } = props;
    const endTimeMs = new Date(timeStampInfo).getTime();
    const theme = useTheme();
    const [time, setTime] = useState(0);
    const timeRemaining = getReadableTime(time);
    React.useEffect(() => {
        const interval = setInterval(() => {
            setTime(Math.max(endTimeMs - Date.now(), 0));
        }, 10);
        return () => {
            clearInterval(interval);
        };
    }, [endTimeMs]);
    return React.createElement(Stack, { horizontal: true, className: timerContainerClass(theme), tokens: {
            childrenGap: '0.5rem'
        } },
        React.createElement(FontIcon, { iconName: 'Clock', className: iconClass }),
        React.createElement(Text, { styles: timerTextStyle }, timeRemaining));
};
const timerContainerClass = (theme) => mergeStyles({
    backgroundColor: theme.palette.neutralLight,
    display: 'flex',
    alignItems: 'center',
    borderColor: theme.palette.neutralQuaternaryAlt,
    borderWidth: '0.0625rem',
    borderRadius: '0.25rem',
    padding: '0.5rem'
});
const iconClass = mergeStyles({
    fontSize: 18
});
const timerTextStyle = {
    root: {
        color: 'inherit',
        fontWeight: 400,
        fontSize: _pxToRem(14),
        lineHeight: _pxToRem(20),
        margin: 'auto'
    }
};
//# sourceMappingURL=Timer.js.map