import { render, screen } from '@testing-library/react';
import { I18nProviderClient } from '@/i18n/client';
import { getScopedI18n } from '@/i18n/server';
import ProfileLayout from './layout';

vi.mock('@/i18n/server', () => ({
    getScopedI18n: vi.fn().mockReturnValue((term: string) => term),
}));

vi.mock('@/i18n/client', () => ({
    I18nProviderClient: vi.fn(({ children }) => <div>{children}</div>),
}));

describe('<ProfileLayout>', () => {
    describe('scoped i18n', () => {
        it('should recieve correct arguments', async () => {
            render(
                await ProfileLayout({
                    params: Promise.resolve({ locale: 'en' }),
                    footer: <div>Footer</div>,
                    children: <div>Children</div>,
                })
            );

            expect(getScopedI18n).toHaveBeenCalledWith('pages.profile');
        });
    });

    describe('<I18nProviderClient>', () => {
        it('should recieve current locale', async () => {
            render(
                await ProfileLayout({
                    params: Promise.resolve({ locale: 'en' }),
                    footer: <div>Footer</div>,
                    children: <div>Children</div>,
                })
            );

            expect(I18nProviderClient).toHaveBeenCalledWith(
                { locale: 'en', children: expect.anything() },
                undefined
            );
        });
    });

    it('should render logo', async () => {
        render(
            await ProfileLayout({
                params: Promise.resolve({ locale: 'en' }),
                footer: <div>Footer</div>,
                children: <div>Children</div>,
            })
        );

        expect(screen.getByRole('img', { name: 'logoAltText' })).toBeVisible();
        expect(screen.getByRole('img')).toHaveAttribute(
            'src',
            expect.stringMatching(/sony_music_logo.svg/)
        );
    });

    it('should render children', async () => {
        render(
            await ProfileLayout({
                params: Promise.resolve({ locale: 'en' }),
                footer: <div>Footer</div>,
                children: <div>Children</div>,
            })
        );

        expect(screen.getByText('Children')).toBeVisible();
    });

    it('should render footer', async () => {
        render(
            await ProfileLayout({
                params: Promise.resolve({ locale: 'en' }),
                footer: <div>Footer</div>,
                children: <div>Children</div>,
            })
        );

        expect(screen.getByText('Footer')).toBeVisible();
    });
});