import { jsx as _jsx } from "react/jsx-runtime";
// @vitest-environment happy-dom
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
/**
 * CollectionList facet filters + taxonomy columns (taxonomy Phase B).
 * Pins: facet dropdowns appear for select fields (config options), free-text
 * `category`, and tag-shaped arrays (in-use values via field-values API);
 * picking one adds `filter.<field>=` to the list endpoint; and taxonomy
 * columns surface category/tags values in the table.
 */
let fieldValues = {};
const cmsApi = vi.fn(async (endpoint, _options) => {
    const match = endpoint.match(/field-values\?field=([^&]+)/);
    if (match) {
        const field = decodeURIComponent(match[1] ?? '');
        return { data: { field, values: fieldValues[field] ?? [] }, status: 200 };
    }
    return { data: {}, status: 200 };
});
vi.mock('../../lib/api.js', () => ({
    cmsApi: (e, o) => cmsApi(e, o),
    ensureCsrfToken: vi.fn(async () => { }),
}));
let lastEndpoint = '';
let listDocs = [];
vi.mock('../../lib/useApiData.js', () => ({
    useApiData: (endpoint) => {
        lastEndpoint = endpoint;
        return {
            data: { docs: listDocs, total: listDocs.length },
            loading: false,
            error: null,
            refetch: vi.fn(),
        };
    },
}));
const { CollectionList } = await import('../../views/CollectionList.js');
const CONFIG = {
    collections: {
        posts: {
            slug: 'posts',
            labels: { singular: 'Post', plural: 'Posts' },
            fields: {
                title: { type: 'text', label: 'Title' },
                topic: {
                    type: 'select',
                    label: 'Topic',
                    options: [
                        { label: 'News', value: 'news' },
                        { label: 'Tutorials', value: 'tutorials' },
                    ],
                },
                category: { type: 'text', label: 'Category', maxLength: 80 },
                body: { type: 'richText', label: 'Body' },
                tags: {
                    type: 'array',
                    label: 'Tags',
                    fields: { tag: { type: 'text', label: 'Tag', required: true } },
                },
            },
        },
    },
};
function renderList() {
    return render(_jsx(CollectionList, { collectionSlug: "posts", config: CONFIG, onNavigate: vi.fn() }));
}
beforeEach(() => {
    cmsApi.mockClear();
    fieldValues = {};
    listDocs = [];
    lastEndpoint = '';
});
describe('CollectionList facets', () => {
    it('renders facet dropdowns for select, category, and tag-shaped fields', async () => {
        fieldValues = {
            category: [{ value: 'Releases', count: 4 }],
            tags: [{ value: 'AI', count: 3 }],
        };
        renderList();
        expect(screen.getByLabelText('Filter by Topic')).toBeTruthy();
        await waitFor(() => {
            expect(screen.getByLabelText('Filter by Category')).toBeTruthy();
            expect(screen.getByLabelText('Filter by Tags')).toBeTruthy();
        });
        // Select facets list config option labels, not in-use values.
        expect(screen.getByRole('option', { name: 'Tutorials' })).toBeTruthy();
        expect(screen.getByRole('option', { name: 'Releases' })).toBeTruthy();
    });
    it('adds filter.<field> to the list endpoint when a facet is picked', async () => {
        fieldValues = { tags: [{ value: 'AI', count: 3 }] };
        renderList();
        fireEvent.change(screen.getByLabelText('Filter by Topic'), { target: { value: 'news' } });
        await waitFor(() => expect(lastEndpoint).toContain('filter.topic=news'));
        await waitFor(() => expect(screen.getByLabelText('Filter by Tags')).toBeTruthy());
        fireEvent.change(screen.getByLabelText('Filter by Tags'), { target: { value: 'AI' } });
        await waitFor(() => {
            expect(lastEndpoint).toContain('filter.topic=news');
            expect(lastEndpoint).toContain('filter.tags=AI');
        });
    });
    it('clears all facets via the clear button', async () => {
        renderList();
        fireEvent.change(screen.getByLabelText('Filter by Topic'), { target: { value: 'news' } });
        await waitFor(() => expect(lastEndpoint).toContain('filter.topic=news'));
        fireEvent.click(screen.getByRole('button', { name: 'Clear filters' }));
        await waitFor(() => expect(lastEndpoint).not.toContain('filter.'));
    });
    it('shows taxonomy columns with select labels and tag lists', async () => {
        listDocs = [
            {
                id: '1',
                title: 'Hello',
                status: 'PUBLISHED',
                updatedAt: '2026-06-01T00:00:00Z',
                data: { topic: 'news', category: 'Releases', tags: [{ tag: 'AI' }, 'CMS'] },
            },
        ];
        renderList();
        // Column headers for each facet field.
        expect(screen.getByRole('columnheader', { name: 'Topic' })).toBeTruthy();
        expect(screen.getByRole('columnheader', { name: 'Category' })).toBeTruthy();
        expect(screen.getByRole('columnheader', { name: 'Tags' })).toBeTruthy();
        // Select value maps to its config label; tags render row + string shapes.
        const table = within(screen.getByRole('table'));
        expect(table.getByText('News')).toBeTruthy();
        expect(table.getByText('Releases')).toBeTruthy();
        expect(table.getByText('AI, CMS')).toBeTruthy();
    });
});
//# sourceMappingURL=collection-list-facets.render.test.js.map