import { render, screen } from '@testing-library/react';
import { isMockApiEnabled } from '@/mocks/utils';
import RootLayout, { generateMetadata } from './layout';

vi.mock('next/font/google', () => ({
    Rubik: vi.fn().mockReturnValue({ className: 'rubik-font' }),
}));

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

vi.mock('@/utils/getBackdropStyle', () => ({
    getBackdropStyle: vi.fn().mockReturnValue({
        backgroundImage: 'url()',
        backgroundSize: '1024px 1024px',
    }),
}));

vi.mock('@/mocks/utils', () => ({
    isMockApiEnabled: vi.fn().mockReturnValue(false),
}));

vi.mock('@/mocks/components/MockToolbar', () => ({
    MockToolbar: () => <div data-testid="mock-toolbar" />,
}));

describe('<RootLayout>', () => {
    afterEach(() => {
        vi.clearAllMocks();
    });

    describe('generateMetadata', () => {
        it('should return localized title', async () => {
            const result = await generateMetadata();

            expect(result).toStrictEqual({ title: 'title' });
        });
    });

    it('should add lang attribute to html element', async () => {
        const { baseElement } = render(
            await RootLayout({
                params: Promise.resolve({ locale: 'en' }),
                children: <div>Children</div>,
            })
        );

        expect(baseElement.parentElement).toHaveAttribute('lang', 'en');
    });

    it('should add font class name to body element', async () => {
        const { baseElement } = render(
            await RootLayout({
                params: Promise.resolve({ locale: 'en' }),
                children: <div>Children</div>,
            })
        );

        expect(baseElement).toHaveClass('rubik-font');
    });

    it('should render background image', async () => {
        const { baseElement } = render(
            await RootLayout({
                params: Promise.resolve({ locale: 'en' }),
                children: <div>Children</div>,
            })
        );

        expect(baseElement).toHaveStyle({
            backgroundImage: 'one',
            backgroundSize: '1024px 1024px',
        });
    });

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

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

    it('should not render MockToolbar when mock API is disabled', async () => {
        render(
            await RootLayout({
                params: Promise.resolve({ locale: 'en' }),
                children: <div />,
            })
        );

        expect(screen.queryByTestId('mock-toolbar')).not.toBeInTheDocument();
    });

    it('should render MockToolbar when mock API is enabled', async () => {
        vi.mocked(isMockApiEnabled).mockReturnValue(true);

        render(
            await RootLayout({
                params: Promise.resolve({ locale: 'en' }),
                children: <div />,
            })
        );

        expect(screen.getByTestId('mock-toolbar')).toBeVisible();
    });
});