// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useTheme } from "../../../../../react-components/src";
import { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';
import { mergeStyles, Stack, Text } from '@fluentui/react';
// eslint-disable-next-line no-restricted-imports
import { Icon } from '@fluentui/react';
import { useLocale } from '../../localization';
import { containerStyle, headerContainerStyle, moreDetailsStyle, titleContainerStyle, titleStyle } from '../styles/NetworkReconnectTile.styles';
import { useHandlers } from '../hooks/useHandlers';
import { CallCompositeIcon } from '../../common/icons';
import { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../selectors/baseSelectors';
import { useSelector } from '../hooks/useSelector';
import { phoneInfoTextStyle, phoneInfoIcon, phoneInfoInstructionLine, phoneInfoStep, phoneInfoIconStyle, phoneInfoLabelStyle, titleClassName, titleContainerClassName, infoConnectionLinkStyle } from '../../common/styles/TeamsMeetingConferenceInfo.style';
import { formatPhoneNumberInfo, _formatPhoneNumber, formatPhoneNumberLink } from "../../../../../react-components/src";
import { _pxToRem } from "../../../../../acs-ui-common/src";
import { Link } from '@fluentui/react';
/**
 * @private
 */
export const NetworkReconnectTile = (props) => {
    var _a;
    const videoStream = props.localParticipantVideoStream;
    const isVideoReady = (_a = videoStream === null || videoStream === void 0 ? void 0 : videoStream.isAvailable) !== null && _a !== void 0 ? _a : false;
    const palette = useTheme().palette;
    const strings = useLocale().strings.call;
    const localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;
    const theme = useTheme();
    const handlers = useHandlers(ExpandedLocalVideoTile);
    const isTeamsMeeting = useSelector(getIsTeamsMeeting);
    const meetingCoordinates = useSelector(getTeamsMeetingCoordinates);
    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
            React.createElement(Stack, { role: "alert", verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(headerContainerStyle) },
                React.createElement(Stack, { horizontal: true, className: mergeStyles(titleContainerStyle) },
                    React.createElement(CallCompositeIcon, { iconName: "NetworkReconnectIcon", className: mergeStyles(titleStyle(palette, isVideoReady)) }),
                    React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, strings.networkReconnectTitle)),
                React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)) }, strings.networkReconnectMoreDetails)),
            isTeamsMeeting && meetingCoordinates && meetingCoordinates[0] && React.createElement(Stack, null,
                React.createElement(Stack, { horizontal: true, horizontalAlign: "center", verticalAlign: "center", className: titleContainerClassName },
                    React.createElement(Text, { className: titleClassName }, localeStrings.meetingConferencePhoneInfoModalTitle)),
                React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInstructionLine },
                    React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
                    React.createElement(Stack.Item, null,
                        React.createElement(Stack, { horizontal: true, className: phoneInfoStep },
                            React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
                                React.createElement(Stack, { verticalAlign: "center", horizontalAlign: "center" },
                                    React.createElement(Icon, { iconName: "JoinByPhoneDialStepIcon", className: phoneInfoIconStyle(theme) }))),
                            React.createElement(Stack.Item, null,
                                React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalDialIn)))),
                    React.createElement(Stack.Item, { className: phoneInfoStep }, meetingCoordinates.map((phoneNumber, index) => React.createElement(Stack.Item, { key: index },
                        React.createElement(Text, { className: phoneInfoTextStyle },
                            props.isMobile && React.createElement(Link, { className: phoneInfoTextStyle, href: formatPhoneNumberLink(phoneNumber) }, _formatPhoneNumber(phoneNumber.phoneNumber, true)),
                            !props.isMobile && React.createElement(Text, { className: phoneInfoTextStyle }, _formatPhoneNumber(phoneNumber.phoneNumber, true)),
                            ' ',
                            phoneNumber.isTollFree ? localeStrings.meetingConferencePhoneInfoModalTollFree : localeStrings.meetingConferencePhoneInfoModalToll),
                        React.createElement("br", null),
                        React.createElement(Text, { className: phoneInfoTextStyle },
                            " ",
                            formatPhoneNumberInfo(phoneNumber, localeStrings)))))),
                React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInstructionLine },
                    React.createElement(Stack.Item, null,
                        React.createElement(Stack, { horizontal: true },
                            !props.isMobile && React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
                            React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
                                React.createElement(Icon, { iconName: "JoinByPhoneConferenceIdIcon", className: phoneInfoIconStyle(theme) })),
                            React.createElement(Stack.Item, null,
                                React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalMeetingId)))),
                    React.createElement(Text, { className: phoneInfoTextStyle },
                        meetingCoordinates[0].conferenceId,
                        "#")),
                !props.isMobile && React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInstructionLine },
                    React.createElement(Stack, { horizontal: true },
                        React.createElement(Stack.Item, { className: phoneInfoIcon(theme), style: {
                                marginLeft: _pxToRem(2)
                            } },
                            React.createElement(Icon, { iconName: "JoinByPhoneWaitToBeAdmittedIcon", className: phoneInfoIconStyle(theme) })),
                        React.createElement(Stack.Item, null,
                            React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalWait)))))) }, handlers));
};
//# sourceMappingURL=NetworkReconnectTile.js.map