// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useState } from 'react';
import { useMemo } from 'react';
import { Dialpad } from "../../../../react-components/src";
import { _DrawerSurface } from "../../../../react-components/src";
import { Modal, Stack, useTheme, Text, IconButton } from '@fluentui/react';
import { PrimaryButton } from '@fluentui/react';
import { themeddialpadModalStyle } from './CallingDialpad.styles';
import { themedCallButtonStyle, themedDialpadStyle } from './CallingDialpad.styles';
import { CallWithChatCompositeIcon } from './icons';
import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
/** @private */
export const CallingDialpad = (props) => {
    const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;
    const [textFieldInput, setTextFieldInput] = useState('');
    const theme = useTheme();
    const onDismissTriggered = () => {
        setTextFieldInput('');
        onDismissDialpad();
    };
    const onClickCall = () => {
        if (onAddParticipant) {
            /**
             * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.
             * We assume the input number always include countrycode
             */
            const phoneNumber = {
                phoneNumber: '+' + textFieldInput.replace(/\D/g, '').replaceAll(' ', '')
            };
            onAddParticipant(phoneNumber, {
                alternateCallerId: {
                    phoneNumber: alternateCallerId
                }
            });
            onDismissTriggered();
        }
    };
    const dialpadModalStyle = useMemo(() => themeddialpadModalStyle(theme), [theme]);
    const dialpadStyle = useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
    const callButtonStyle = useMemo(() => themedCallButtonStyle(theme), [theme]);
    const dialpadComponent = () => {
        return React.createElement(React.Fragment, null,
            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, longPressTrigger: isMobile ? 'touch' : 'mouseAndTouch' }),
            React.createElement(PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "DialpadStartCall" }), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' }));
    };
    if (isMobile) {
        return React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, showDialpad && React.createElement(Stack, { styles: drawerContainerStyles() },
            React.createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered, disableMaxHeight: true },
                React.createElement(Stack, { style: {
                        padding: '1rem'
                    } }, dialpadComponent()))));
    }
    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
        React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
            React.createElement(Text, null, strings.dialpadModalTitle),
            React.createElement(IconButton, { iconProps: {
                    iconName: 'Cancel'
                }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: {
                    color: theme.palette.black
                } })),
        React.createElement(Stack, { style: {
                overflow: 'hidden'
            } }, dialpadComponent())));
};
//# sourceMappingURL=CallingDialpad.js.map