import { mount } from '@vue/test-utils';
import { defineComponent } from 'vue';
import { describe, expect, it, vi } from 'vitest';
import { KviewPageHeader } from '@kview/ui-core/vue';

vi.mock('@inertiajs/vue3', async (importOriginal) => {
    const actual = await importOriginal<typeof import('@inertiajs/vue3')>();

    return {
        ...actual,
        Head: defineComponent({
            name: 'InertiaHeadStub',
            props: { title: String },
            template: '<span data-head />',
        }),
    };
});

import ActivityPage from '@/Pages/Activity/Index.vue';
import AppLink from '@/components/application/AppLink.vue';
import type { ActivityPageProps } from '@/types/activity';

const pageProps: ActivityPageProps = {
    homeLink: {
        href: '/',
        inertia: true,
    },
    activeFilter: 'added',
    filters: [
        {
            key: 'added',
            label: 'Ajouté',
            count: 1,
            active: true,
            href: '/activity?activity=added',
            linkProps: { inertia: true },
        },
    ],
    items: [
        {
            id: 'added:gp:1',
            title: 'Northstar Partners',
            description: 'General Partner',
            icon: 'building',
            tone: 'positive',
            status: 'added',
            statusLabel: 'Ajouté',
            href: '/gps/1',
            linkProps: { inertia: true },
            time: {
                label: 'now',
                datetime: '2035-01-15T12:00:00+01:00',
            },
        },
    ],
    pagination: {
        currentPage: 2,
        lastPage: 3,
        perPage: 25,
        total: 60,
        from: 26,
        to: 50,
        links: [
            {
                label: 'Previous',
                href: '/activity?activity=added&page=1',
                active: false,
                kind: 'previous',
                linkProps: { inertia: true },
            },
            {
                label: '1',
                href: '/activity?activity=added&page=1',
                active: false,
                kind: 'page',
                linkProps: { inertia: true },
            },
            {
                label: '2',
                href: '/activity?activity=added&page=2',
                active: true,
                kind: 'page',
                linkProps: { inertia: true },
            },
            {
                label: '3',
                href: '/activity?activity=added&page=3',
                active: false,
                kind: 'page',
                linkProps: { inertia: true },
            },
            {
                label: 'Next',
                href: '/activity?activity=added&page=3',
                active: false,
                kind: 'next',
                linkProps: { inertia: true },
            },
        ],
    },
};

describe('Activity Inertia page', () => {
    it('composes the standard header, feed and accessible pagination', () => {
        const wrapper = mount(ActivityPage, {
            props: pageProps,
        });
        const header = wrapper.getComponent(KviewPageHeader);
        const pagination = wrapper.get('nav[aria-label="Pagination de l’activité"]');
        const links = pagination.findAllComponents(AppLink);

        expect(wrapper.get('h1').text()).toBe('Activité');
        expect(wrapper.get('h2').text()).toBe('Historique récent');
        expect(header.props()).toMatchObject({
            backHref: '/',
            backLabel: 'Home',
            backInertia: true,
        });
        expect(pagination.get('[aria-current="page"]').text()).toBe('2');
        expect(links[2].props('href')).toBe('/activity?activity=added&page=2');
        expect(links[2].props('current')).toBe('page');
        expect(links).toHaveLength(5);

        for (const link of links) {
            expect(link.props('inertia')).toBe(true);
            expect(link.props('preserveState')).toBe(true);
            expect(link.props('preserveScroll')).toBe(false);
        }

        expect(pagination.text()).toContain('Affichage de 26 à 50 sur 60');
    });

    it('omits pagination when the server reports a single page', () => {
        const wrapper = mount(ActivityPage, {
            props: {
                ...pageProps,
                pagination: {
                    ...pageProps.pagination,
                    currentPage: 1,
                    lastPage: 1,
                    total: 1,
                    from: 1,
                    to: 1,
                    links: [],
                },
            },
        });

        expect(wrapper.find('nav[aria-label="Pagination de l’activité"]').exists()).toBe(false);
    });
});