import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing';
import '../../../src/elements/navigation/ui-navigation.js';
import '../../../src/elements/navigation/ui-navigation-item.js';
describe('Navigation', () => {
    it('renders with slot content', async () => {
        const el = await fixture(html `
      <ui-navigation aria-label="Main navigation">
        <ui-navigation-item selected aria-current="page">Home</ui-navigation-item>
        <ui-navigation-item>Search</ui-navigation-item>
        <ui-navigation-item>Files</ui-navigation-item>
      </ui-navigation>
    `);
        const nav = el.shadowRoot.querySelector('nav');
        assert.ok(nav, 'nav element is rendered');
        assert.equal(nav?.getAttribute('aria-label'), 'Main navigation');
        const items = el._items;
        assert.equal(items.length, 3);
        assert.isTrue(items[0].selected);
        assert.equal(items[0].getAttribute('aria-current'), 'page');
    });
    it('sets correct tabindex for items', async () => {
        const el = await fixture(html `
      <ui-navigation>
        <ui-navigation-item selected>Home</ui-navigation-item>
        <ui-navigation-item>Search</ui-navigation-item>
      </ui-navigation>
    `);
        const items = el._items;
        assert.equal(items[0].getAttribute('tabindex'), '0');
        assert.equal(items[1].getAttribute('tabindex'), '-1');
    });
    it('selects item on click and fires select event', async () => {
        const el = await fixture(html `
      <ui-navigation>
        <ui-navigation-item>Home</ui-navigation-item>
        <ui-navigation-item>Search</ui-navigation-item>
      </ui-navigation>
    `);
        const items = el._items;
        setTimeout(() => items[1].click());
        const ev = await oneEvent(el, 'select');
        assert.equal(ev.detail.item, items[1]);
        assert.isTrue(items[1].selected);
        assert.equal(items[1].getAttribute('tabindex'), '0');
        assert.isFalse(items[0].selected);
        assert.equal(items[0].getAttribute('tabindex'), '-1');
    });
    it('handles keyboard navigation (vertical)', async () => {
        const el = await fixture(html `
      <ui-navigation>
        <ui-navigation-item>Home</ui-navigation-item>
        <ui-navigation-item>Search</ui-navigation-item>
        <ui-navigation-item>Files</ui-navigation-item>
      </ui-navigation>
    `);
        const items = el._items;
        items[0].focus();
        // ArrowDown moves to next
        items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
        await aTimeout(0);
        assert.dom.equal(document.activeElement, items[1]);
        // ArrowUp wraps to last
        items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
        await aTimeout(0);
        assert.dom.equal(document.activeElement, items[0]);
    });
    it('handles keyboard navigation (horizontal)', async () => {
        const el = await fixture(html `
      <ui-navigation orientation="horizontal">
        <ui-navigation-item>Home</ui-navigation-item>
        <ui-navigation-item>Search</ui-navigation-item>
      </ui-navigation>
    `);
        const items = el._items;
        items[0].focus();
        items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
        await aTimeout(0);
        assert.dom.equal(document.activeElement, items[1]);
        items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
        await aTimeout(0);
        assert.dom.equal(document.activeElement, items[0]);
    });
    it('skips disabled items in navigation', async () => {
        const el = await fixture(html `
      <ui-navigation>
        <ui-navigation-item>Home</ui-navigation-item>
        <ui-navigation-item disabled>Search</ui-navigation-item>
        <ui-navigation-item>Files</ui-navigation-item>
      </ui-navigation>
    `);
        const items = el._items;
        items[0].focus();
        items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
        await aTimeout(0);
        // Should skip disabled and go to Files
        assert.dom.equal(document.activeElement, items[2]);
    });
    it('sets aria-current on selected item if current is set', async () => {
        const el = await fixture(html `
      <ui-navigation current="page">
        <ui-navigation-item>Home</ui-navigation-item>
        <ui-navigation-item>Search</ui-navigation-item>
      </ui-navigation>
    `);
        const items = el._items;
        // Simulate user selection by clicking the item (public API)
        items[1].click();
        await aTimeout(0);
        assert.equal(items[1].getAttribute('aria-current'), 'page');
        assert.isFalse(items[0].hasAttribute('aria-current'));
    });
});
//# sourceMappingURL=Navigation.test.js.map