// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback } from 'react';
import { useMemo } from 'react';
import { Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';
import { themedPhoneInfoModalStyle, titleClassName, titleContainerClassName, phoneInfoTextStyle, phoneInfoIcon, phoneInfoInctructionLine, phoneInfoStep, stepTextStyle, infoConnectionLinkStyle, phoneInfoIconStyle } from './styles/TeamsMeetingConferenceInfo';
import { useLocale } from '../localization';
import { _pxToRem } from "../../../acs-ui-common/src";
import { _formatPhoneNumber } from './utils/formatPhoneNumber';
/**
 * @public
 * a component for setting spoken languages
 */
export const MeetingConferencePhoneInfoModal = (props) => {
    var _a;
    const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;
    const theme = useTheme();
    const strings = useLocale().strings.meetingConferencePhoneInfo;
    const onDismiss = useCallback(() => {
        if (onDismissMeetingPhoneInfoSettings) {
            onDismissMeetingPhoneInfoSettings();
        }
    }, [onDismissMeetingPhoneInfoSettings]);
    const PhoneInfoModalStyle = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);
    return React.createElement(React.Fragment, null,
        React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: PhoneInfoModalStyle },
            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
                React.createElement(Text, { role: "heading", "aria-level": 2, className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle),
                React.createElement(IconButton, { iconProps: {
                        iconName: 'Cancel'
                    }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, onClick: onDismiss, style: {
                        color: theme.palette.black
                    } })),
            conferencePhoneInfoList.length === 0 && React.createElement(Stack, { horizontal: true },
                React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalNoPhoneAvailable)),
            conferencePhoneInfoList.length > 0 && React.createElement(Stack, null,
                React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInctructionLine },
                    React.createElement(Stack.Item, { style: {
                            display: 'flex'
                        } },
                        React.createElement(Stack, { horizontal: true, className: phoneInfoStep },
                            React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
                            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: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalDialIn)))),
                    React.createElement(Stack.Item, { className: phoneInfoStep }, conferencePhoneInfoList.map((phoneNumber, index) => React.createElement(Stack.Item, { key: index },
                        React.createElement(Text, { className: phoneInfoTextStyle },
                            _formatPhoneNumber(phoneNumber.phoneNumber, true),
                            ' ',
                            phoneNumber.isTollFree ? strings.meetingConferencePhoneInfoModalTollFree : strings.meetingConferencePhoneInfoModalToll),
                        React.createElement("br", null),
                        React.createElement(Text, { className: phoneInfoTextStyle },
                            " ",
                            formatPhoneNumberInfo(phoneNumber, strings)))))),
                React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInctructionLine },
                    React.createElement(Stack.Item, { style: {
                            display: 'flex'
                        } },
                        React.createElement(Stack, { horizontal: true },
                            React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
                            React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
                                React.createElement(Stack, { verticalAlign: "center", horizontalAlign: "center" },
                                    React.createElement(Icon, { iconName: "JoinByPhoneConferenceIdIcon", className: phoneInfoIconStyle(theme) }))),
                            React.createElement(Stack.Item, null,
                                React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalMeetingId)))),
                    React.createElement(Text, { className: phoneInfoTextStyle }, formatMeetingId((_a = conferencePhoneInfoList[0]) === null || _a === void 0 ? void 0 : _a.conferenceId))),
                React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
                    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: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalWait)))))));
};
/**
 * @internal
 * format phone number link
 */
export const formatPhoneNumberLink = (phoneNumber) => {
    return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;
};
/**
 * @internal
 * format phone number
 */
export const formatPhoneNumberInfo = (phoneNumber, strings) => {
    const templateText = phoneNumber.country && phoneNumber.city ? strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTollGeoData : '';
    return (templateText === null || templateText === void 0 ? void 0 : templateText.replace('{country}', phoneNumber.country || '').replace('{city}', phoneNumber.city || '').trim()) || '';
};
/**
 * @internal
 * format meeting id
 */
export const formatMeetingId = (meetingId) => {
    if (!meetingId) {
        return '';
    }
    if ((meetingId === null || meetingId === void 0 ? void 0 : meetingId.length) !== 9) {
        return meetingId;
    }
    return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';
};
//# sourceMappingURL=MeetingConferencePhoneInfo.js.map