import type { FC } from 'react';
import React from 'react';
import { Alert } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { useApplicationLink } from 'src/utils/route';

const CLASSNAME = 'AccountNotifications';

interface Props {
    vendorId?: number;
}

const alertTitle = formatMessage('notifications.invite.title');
const alertSubtitle = formatMessage('notifications.invite.subtitle');
const alertMessage = formatMessage('notifications.invite.alertMessage');

const AccountNotifications: FC<Props> = ({ vendorId }) => {
    const settingsURL = useApplicationLink('settings');

    const handleInvite = () => {
        if (!settingsURL) return;

        const settingsLink = `${settingsURL}/invite/masterContact?resourceId=${vendorId}`;

        window.open(settingsLink, '_blank');
    };

    return (
        <div className={CLASSNAME}>
            <Alert
                title={alertTitle}
                text={alertMessage}
                variant="error"
                button={{
                    text: alertSubtitle,
                    onClick: handleInvite,
                }}
            />
        </div>
    );
};

export default AccountNotifications;