/**
 * <command-ui> behavioral tests.
 *
 * FB-50 #3 (v0.5.19): the `select` event detail now carries `category`
 * derived from the parent <optgroup label> (or '' when the item has
 * no group).
 */

import { describe, it, expect, beforeAll, beforeEach, afterEach } from 'vitest';

beforeAll(async () => {
  await import('./command.js');
});

describe('<command-ui> select event detail includes category (FB-50 #3)', () => {
  let host;
  let palette;

  beforeEach(async () => {
    host = document.createElement('div');
    document.body.appendChild(host);

    palette = document.createElement('command-ui');
    palette.setAttribute('open', '');

    // Mixed: one ungrouped option, one optgroup with two options.
    const ungrouped = document.createElement('option');
    ungrouped.setAttribute('value', 'logout');
    ungrouped.textContent = 'Log out';

    const optgroup = document.createElement('optgroup');
    optgroup.setAttribute('label', 'Navigation');
    const opt1 = document.createElement('option');
    opt1.setAttribute('value', 'home');
    opt1.textContent = 'Go Home';
    const opt2 = document.createElement('option');
    opt2.setAttribute('value', 'settings');
    opt2.textContent = 'Settings';
    optgroup.appendChild(opt1);
    optgroup.appendChild(opt2);

    palette.appendChild(ungrouped);
    palette.appendChild(optgroup);
    host.appendChild(palette);

    await new Promise((r) => setTimeout(r, 50));
  });

  afterEach(() => {
    host.remove();
  });

  it('emits category="" for an ungrouped option', () => {
    let received = null;
    palette.addEventListener('select', (e) => { received = e.detail; });

    // Use the imperative setItems() path to bypass DOM-walk ordering;
    // the optgroup path is exercised in the next test.
    palette.setItems([{ value: 'logout', label: 'Log out' }]);

    // Simulate user clicking the logout row.
    const row = palette.querySelector('[role="option"][data-value="logout"]');
    expect(row).not.toBeNull();
    row.click();

    expect(received).not.toBeNull();
    expect(received.value).toBe('logout');
    expect(received.label).toBe('Log out');
    expect(received.category).toBe('');
  });

  it('emits category="<optgroup label>" for an item inside an optgroup', () => {
    let received = null;
    palette.addEventListener('select', (e) => { received = e.detail; });

    const homeRow = palette.querySelector('[role="option"][data-value="home"]');
    expect(homeRow).not.toBeNull();
    homeRow.click();

    expect(received).not.toBeNull();
    expect(received.value).toBe('home');
    expect(received.label).toBe('Go Home');
    expect(received.category).toBe('Navigation');
  });

  it('detail shape stays backward-compatible (existing destructuring works)', () => {
    let received = null;
    palette.addEventListener('select', (e) => {
      const { value, label } = e.detail;  // pre-FB-50 destructuring shape
      received = { value, label };
    });

    const settingsRow = palette.querySelector('[role="option"][data-value="settings"]');
    settingsRow.click();

    expect(received.value).toBe('settings');
    expect(received.label).toBe('Settings');
  });
});
