import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { services } from 'src/services/user';
import IdentityContext from '../../../context';
import SuiteNotificationBanner from '../suite-notification-banner';
import type { SuiteNotification } from '@theorchard/suite-frontend';

const mockNotifications: SuiteNotification[] = [
    {
        id: 'expiring-tax-form',
        variant: 'error',
        message:
            'Reminder: Your tax information will expire at the end of the year. ' +
            'To avoid delays on payment, please update your tax details.',
        link: new URL(
            `/account/123/taxpayments`,
            'https://documents.theorchard.com'
        ).toString(),
        messageData: { count: 11 },
    },
    {
        id: 'missing-banking-and-tax-info-for-payouts',
        variant: 'error',
        message:
            'Reminder: you need to provide your banking and tax information in order to receive payouts. ' +
            'Please update the data in Banking and Tax app',
        link: new URL(
            `/account/123/taxpayments`,
            'https://documents.theorchard.com'
        ).toString(),
        messageData: { count: 2 },
    },
];

describe('<SuiteNotificationBanner>', () => {
    const ctx = {
        identity: {
            identityId: '7988bbae-086e-4a96-8e65-fd21b07305ef',
        },
        hasAuthentication: () => false as const,
    } as React.ContextType<typeof IdentityContext>;

    beforeEach(() => {
        jest.spyOn(services, 'getGqlUserSuiteNotifications').mockResolvedValue(
            []
        );
        jest.spyOn(window, 'open').mockImplementation(jest.fn());
    });

    const renderComponent = () =>
        render(
            <IdentityContext.Provider value={ctx}>
                <SuiteNotificationBanner />
            </IdentityContext.Provider>
        );

    test('renders nothing when no notifications are returned', async () => {
        jest.spyOn(services, 'getGqlUserSuiteNotifications').mockResolvedValue(
            []
        );

        const r = renderComponent();

        const banner = r.queryByTestId('SuiteNotificationBanner');
        expect(banner).not.toBeInTheDocument();
    });

    test('renders single notification banner', async () => {
        jest.spyOn(services, 'getGqlUserSuiteNotifications').mockResolvedValue([
            mockNotifications[0],
        ]);

        const r = renderComponent();

        const banner = await r.findByTestId('SuiteNotificationBanner');
        const alerts = await r.findAllByTestId('SuiteNotificationBanner-Alert');

        expect(banner).toBeInTheDocument();
        expect(alerts).toHaveLength(1);
    });

    test('renders multiple notification banners together', async () => {
        jest.spyOn(services, 'getGqlUserSuiteNotifications').mockResolvedValue(
            mockNotifications
        );

        const r = renderComponent();

        const banner = await r.findByTestId('SuiteNotificationBanner');
        const alerts = await r.findAllByTestId('SuiteNotificationBanner-Alert');

        expect(banner).toBeInTheDocument();
        expect(alerts).toHaveLength(2);
    });

    test('opens link in new window when button is clicked', async () => {
        jest.spyOn(services, 'getGqlUserSuiteNotifications').mockResolvedValue([
            mockNotifications[0],
        ]);

        const r = renderComponent();

        const banner = await r.findByTestId('SuiteNotificationBanner');
        const button = banner.querySelector('button');

        expect(button).toBeInTheDocument();

        if (button) {
            fireEvent.click(button);
        }

        expect(window.open).toHaveBeenCalledWith(
            'https://documents.theorchard.com/account/123/taxpayments',
            '_blank'
        );
    });
});