import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @vitest-environment happy-dom
import { afterEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import { InspectorExpandButton, ResizableAside, SECTION_INSPECTOR_DEFAULT_WIDTH, SECTION_INSPECTOR_MIN_WIDTH, SECTION_INSPECTOR_WIDTH_KEY, computeInspectorMaxWidth, computeInspectorOverlayWidth, readSectionInspectorWidth, } from '../../components/ui/ResizableAside.js';
const storage = new Map();
vi.stubGlobal('localStorage', {
    getItem: (key) => storage.get(key) ?? null,
    setItem: (key, value) => void storage.set(key, String(value)),
    removeItem: (key) => void storage.delete(key),
    clear: () => storage.clear(),
});
vi.stubGlobal('ResizeObserver', class {
    callback;
    constructor(callback) {
        this.callback = callback;
    }
    observe(target) {
        const width = target instanceof HTMLElement
            ? Number.parseFloat(target.style.width) || target.clientWidth || 900
            : 900;
        this.callback([{ contentRect: { width, height: 600 } }], this);
    }
    unobserve() { }
    disconnect() { }
});
afterEach(() => {
    storage.clear();
});
describe('inspector width helpers', () => {
    it('caps inline max width to the container minus a canvas peek', () => {
        expect(computeInspectorMaxWidth(1200)).toBe(640);
        expect(computeInspectorMaxWidth(500)).toBe(404);
        expect(computeInspectorMaxWidth(200)).toBe(SECTION_INSPECTOR_MIN_WIDTH);
    });
    it('computes overlay width for narrow editor rows', () => {
        expect(computeInspectorOverlayWidth(375)).toBe(343);
        expect(computeInspectorOverlayWidth(768)).toBe(480);
    });
});
describe('ResizableAside', () => {
    it('renders a vertical resize separator with keyboard support', () => {
        render(_jsx("div", { style: { width: 900 }, children: _jsx(ResizableAside, { "aria-label": "Section editor", children: _jsx("p", { children: "Inspector content" }) }) }));
        expect(screen.getByText('Inspector content')).toBeTruthy();
        const separator = screen.getByRole('separator', { name: 'Resize inspector panel' });
        expect(separator.getAttribute('aria-orientation')).toBe('vertical');
        expect(separator.getAttribute('aria-valuemin')).toBe(String(SECTION_INSPECTOR_MIN_WIDTH));
    });
    it('widens when dragging the separator left', () => {
        render(_jsx("div", { style: { width: 900 }, children: _jsx(ResizableAside, { "aria-label": "Section editor", children: _jsx("p", { children: "Inspector content" }) }) }));
        const aside = screen.getByLabelText('Section editor');
        const separator = screen.getByRole('separator', { name: 'Resize inspector panel' });
        expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH}px`);
        fireEvent.pointerDown(separator, { clientX: 900, button: 0, pointerId: 1 });
        fireEvent.pointerMove(separator, { clientX: 860, pointerId: 1 });
        expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH + 40}px`);
        fireEvent.pointerUp(separator, { pointerId: 1 });
        expect(localStorage.getItem(SECTION_INSPECTOR_WIDTH_KEY)).toBe(String(SECTION_INSPECTOR_DEFAULT_WIDTH + 40));
    });
    it('nudges width with arrow keys and persists', () => {
        render(_jsx("div", { style: { width: 900 }, children: _jsx(ResizableAside, { "aria-label": "Section editor", children: _jsx("p", { children: "Inspector content" }) }) }));
        const aside = screen.getByLabelText('Section editor');
        const separator = screen.getByRole('separator', { name: 'Resize inspector panel' });
        separator.focus();
        fireEvent.keyDown(separator, { key: 'ArrowLeft' });
        expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH + 16}px`);
        expect(readSectionInspectorWidth()).toBe(SECTION_INSPECTOR_DEFAULT_WIDTH + 16);
    });
    it('expands to overlay width on narrow containers', () => {
        render(_jsx("div", { style: { width: 375 }, children: _jsxs(ResizableAside, { "aria-label": "Section editor", children: [_jsx(InspectorExpandButton, {}), _jsx("p", { children: "Inspector content" })] }) }));
        const aside = screen.getByLabelText('Section editor');
        fireEvent.click(screen.getByRole('button', { name: 'Expand inspector panel' }));
        expect(aside.getAttribute('data-overlay')).toBe('');
        expect(aside.style.width).toBe(`${computeInspectorOverlayWidth(375)}px`);
    });
});
//# sourceMappingURL=resizable-aside.test.js.map