// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
// eslint-disable-next-line no-restricted-imports
import { Stack, Text, useTheme, Icon, Link } from '@fluentui/react';
import React from 'react';
import { formatPhoneNumberInfo, _formatPhoneNumber, formatPhoneNumberLink } from "../../../../react-components/src";
import { phoneInfoTextStyle, phoneInfoIcon, phoneInfoInstructionLine, phoneInfoStep, phoneInfoIconStyle, phoneInfoLabelStyle, phoneInfoContainerTokens, phoneInfoContainerStyle } from './styles/TeamsMeetingConferenceInfo.style';
import { useLocale } from '../localization';
/**
 * @private
 */
export const MeetingPhoneInfoPaneContent = (props) => {
    const { conferencePhoneInfoList } = props;
    const theme = useTheme();
    const localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;
    if (props.mobileView) {
        return React.createElement(Stack, { verticalFill: true, styles: phoneInfoContainerStyle, tokens: phoneInfoContainerTokens, "data-ui-id": "phone-info-pane-content" },
            (conferencePhoneInfoList === undefined || conferencePhoneInfoList.length === 0) && React.createElement(Stack, { horizontal: true },
                React.createElement(Text, { className: phoneInfoTextStyle }, localeStrings.meetingConferencePhoneInfoModalNoPhoneAvailable)),
            conferencePhoneInfoList && conferencePhoneInfoList[0] && React.createElement(Stack, null,
                React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInstructionLine },
                    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 }, conferencePhoneInfoList.map((phoneNumber, index) => React.createElement(Stack.Item, { key: index },
                        React.createElement(Link, { className: phoneInfoTextStyle, href: formatPhoneNumberLink(phoneNumber) }, _formatPhoneNumber(phoneNumber.phoneNumber, true)),
                        React.createElement(Text, { className: phoneInfoTextStyle },
                            ' ',
                            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 },
                            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 },
                        conferencePhoneInfoList[0].conferenceId,
                        "#")),
                React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInstructionLine },
                    React.createElement(Stack, { horizontal: true },
                        React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
                            React.createElement(Icon, { iconName: "JoinByPhoneWaitToBeAdmittedIcon", className: phoneInfoIconStyle(theme) })),
                        React.createElement(Stack.Item, null,
                            React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalWait))))));
    }
    return React.createElement(Stack, { verticalFill: true, styles: phoneInfoContainerStyle, tokens: phoneInfoContainerTokens, "data-ui-id": "phone-info-pane-content" });
};
//# sourceMappingURL=MeetingPhoneInfoPaneContent.js.map