import { jsx as _jsx } from "react/jsx-runtime";
// @vitest-environment happy-dom
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
const { BuilderSectionsPanel } = await import('../../views/page-builder/BuilderSectionsPanel.js');
/** Minimal builder tree: a hero section plus an empty, hidden section. */
function makeTree() {
    return {
        id: 'page1',
        type: 'page',
        children: [
            {
                id: 'sec1',
                type: 'section',
                settings: {},
                children: [
                    {
                        id: 'cont1',
                        type: 'container',
                        settings: {},
                        children: [
                            {
                                id: 'row1',
                                type: 'row',
                                settings: {},
                                children: [
                                    {
                                        id: 'col1',
                                        type: 'column',
                                        settings: { width: 12 },
                                        children: [
                                            {
                                                id: 'blk1',
                                                type: 'block',
                                                settings: { blockType: 'hero', variant: 'centered' },
                                                data: {},
                                            },
                                        ],
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
            { id: 'sec2', type: 'section', settings: { visibility: 'hidden' }, children: [] },
        ],
    };
}
function renderPanel(over = {}) {
    const props = {
        tree: makeTree(),
        selectedNodeId: null,
        collapsed: false,
        onToggleCollapsed: vi.fn(),
        onSelect: vi.fn(),
        onReorder: vi.fn(),
        onAddSection: vi.fn(),
        ...over,
    };
    render(_jsx(BuilderSectionsPanel, { ...props }));
    return props;
}
beforeEach(() => {
    vi.clearAllMocks();
});
describe('BuilderSectionsPanel', () => {
    it('lists the page sections in order with derived names and block counts', () => {
        renderPanel();
        // First section is named after its first block's catalog label.
        expect(screen.getByText('Hero')).toBeTruthy();
        expect(screen.getByText('1 block')).toBeTruthy();
        // Empty section falls back to a positional name.
        expect(screen.getByText('Section 2')).toBeTruthy();
        expect(screen.getByText('Empty section')).toBeTruthy();
        // Count chip in the header.
        expect(screen.getByText('2')).toBeTruthy();
        // Panel is an accessible nav landmark.
        expect(screen.getByRole('navigation', { name: 'Page sections' })).toBeTruthy();
    });
    it('fires the selection callback when a section row is clicked', () => {
        const props = renderPanel();
        // `/^Hero/` excludes the drag handle ("Drag to reorder Hero").
        fireEvent.click(screen.getByRole('button', { name: /^Hero/ }));
        expect(props.onSelect).toHaveBeenCalledWith('sec1');
    });
    it('marks the selected section with aria-current', () => {
        renderPanel({ selectedNodeId: 'sec1' });
        const row = screen.getByRole('button', { name: /^Hero/ });
        expect(row.getAttribute('aria-current')).toBe('true');
    });
    it('exposes keyboard-accessible drag handles per section', () => {
        renderPanel();
        expect(screen.getByRole('button', { name: 'Drag to reorder Hero' })).toBeTruthy();
        expect(screen.getByRole('button', { name: 'Drag to reorder Section 2' })).toBeTruthy();
    });
    it('fires the add-section callback from the bottom affordance', () => {
        const props = renderPanel();
        fireEvent.click(screen.getByRole('button', { name: 'Add Section' }));
        expect(props.onAddSection).toHaveBeenCalledTimes(1);
    });
    it('collapses to a rail with an expand toggle', () => {
        const props = renderPanel({ collapsed: true });
        // Section rows are gone; only the expand affordance remains.
        expect(screen.queryByText('Hero')).toBeNull();
        const toggle = screen.getByRole('button', { name: 'Expand sections panel' });
        expect(toggle.getAttribute('aria-expanded')).toBe('false');
        fireEvent.click(toggle);
        expect(props.onToggleCollapsed).toHaveBeenCalledTimes(1);
    });
    it('shows a collapse toggle with aria-expanded when open', () => {
        renderPanel();
        const toggle = screen.getByRole('button', { name: 'Collapse sections panel' });
        expect(toggle.getAttribute('aria-expanded')).toBe('true');
    });
    it('shows an empty message when the page has no sections', () => {
        renderPanel({ tree: { id: 'page1', type: 'page', children: [] } });
        expect(screen.getByText(/No sections yet/)).toBeTruthy();
    });
});
//# sourceMappingURL=page-builder-sections-panel.render.test.js.map