import { App } from '@inertiajs/react';
import type { Page } from '@inertiajs/core';
import { renderToString } from 'react-dom/server';
import type { ReactNode } from 'react';
import { expect, test } from 'vitest';
import PreviewLayout from '@/layouts/preview-layout';
import Preview from '@/pages/preview';
import { previewPaths } from '@/lib/preview-navigation';
import { TooltipProvider } from '@/components/ui/tooltip';

const page = {
    component: 'preview/index',
    url: '/proposta/principal',
    version: 'regression',
    props: {
        errors: {},
        name: 'SGC',
        canRequest: false,
        auth: { user: null },
        organizationAccess: {},
        payablesAvailable: false,
        sidebarOpen: true,
        initialScreen: 'overview',
    },
    clearHistory: false,
    encryptHistory: false,
} satisfies Page;

test('Inertia default preview layout renders the child page instead of its shared props', () => {
    function Screen() {
        return <main>Conteúdo da página de demonstração</main>;
    }
    const html = renderToString(
        <App
            initialPage={page}
            initialComponent={Screen}
            defaultLayout={() => PreviewLayout}
        />,
    );
    expect(html).toContain('Conteúdo da página de demonstração');
    expect(html).toContain('Dados fictícios');
    expect(html).toContain('sgc-main');
});

test('the former default layout reproduces the reported props object crash', () => {
    const formerLayout = (props: ReactNode) => (
        <PreviewLayout>{props}</PreviewLayout>
    );
    function Screen() {
        return <main>Conteúdo</main>;
    }
    expect(() =>
        renderToString(
            <App
                initialPage={page}
                initialComponent={Screen}
                defaultLayout={() => formerLayout}
            />,
        ),
    ).toThrow(/Objects are not valid as a React child.*initialScreen/);
});

test.each(Object.entries(previewPaths))(
    'preview screen %s renders through the real Inertia adapter',
    (screen, url) => {
        const html = renderToString(
            <TooltipProvider>
                <App
                    initialPage={{
                        ...page,
                        url,
                        props: { ...page.props, initialScreen: screen },
                    }}
                    initialComponent={Preview}
                    defaultLayout={() => PreviewLayout}
                />
            </TooltipProvider>,
        );
        expect(html).toContain('Dados fictícios');
        expect(html).toContain('sgc-main');
    },
);