// 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 { Dialpad } from "../../../../../react-components/src";
import React, { useEffect, useMemo, useState } from 'react';
import { Stack, Text, useTheme } from '@fluentui/react';
import { getReadableTime } from '../utils/timerUtils';
import { DtmfDialpadContentTimerStyles } from '../styles/DtmfDialpadPage.styles';
import { isPhoneNumberIdentifier } from '@azure/communication-common';
import { useSelector } from '../hooks/useSelector';
import { getRemoteParticipants, getStartTime, getTargetCallees } from '../selectors/baseSelectors';
import { useAdapter } from '../adapter/CallAdapterProvider';
const DtmfDialpadPageContent = (props) => {
    const theme = useTheme();
    const targetCallees = useSelector(getTargetCallees);
    const remoteParticipants = useSelector(getRemoteParticipants);
    const calleeId = targetCallees === null || targetCallees === void 0 ? void 0 : targetCallees[0];
    let calleeName;
    if (remoteParticipants) {
        const remoteParticipantValues = Object.values(remoteParticipants);
        if (calleeId && isPhoneNumberIdentifier(calleeId)) {
            calleeName = calleeId.phoneNumber;
        }
        else {
            calleeName = remoteParticipantValues.find(p => p.identifier === calleeId);
        }
    }
    const adapter = useAdapter();
    return React.createElement(Stack, { style: {
            height: '100%',
            width: '100%',
            background: theme.palette.white
        } },
        React.createElement(Stack, { verticalAlign: 'center', style: {
                margin: 'auto'
            } },
            React.createElement(DtmfDialerContentTimer, null),
            React.createElement(Text, { style: {
                    margin: 'auto'
                } }, calleeName && calleeName !== 'Unnamed participant' ? calleeName === null || calleeName === void 0 ? void 0 : calleeName.toString() : ''),
            React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter(void 0, void 0, void 0, function* () {
                    yield adapter.sendDtmfTone(tone);
                }), longPressTrigger: props.mobileView ? 'touch' : 'mouseAndTouch', dialpadMode: 'dtmf', dtmfAudioContext: props.compositeAudioContext })));
};
const DtmfDialerContentTimer = () => {
    const [time, setTime] = useState(0);
    const elapsedTime = getReadableTime(time);
    const statefulStartTime = useSelector(getStartTime);
    const startTime = useMemo(() => {
        return statefulStartTime !== null && statefulStartTime !== void 0 ? statefulStartTime : new Date(Date.now());
    }, [statefulStartTime]);
    useEffect(() => {
        const interval = setInterval(() => {
            var _a;
            setTime(new Date(Date.now()).getTime() - ((_a = startTime === null || startTime === void 0 ? void 0 : startTime.getTime()) !== null && _a !== void 0 ? _a : 0));
        }, 10);
        return () => {
            clearInterval(interval);
        };
    }, [startTime]);
    return React.createElement(Text, { styles: DtmfDialpadContentTimerStyles }, elapsedTime);
};
/**
 * @internal
 */
export const DtmfDialpadPage = (props) => {
    return React.createElement(DtmfDialpadPageContent, Object.assign({}, props, { mobileView: props.mobileView }));
};
//# sourceMappingURL=DtmfDialpadPage.js.map