/**
 * <description-list-ui> behavioral tests.
 *
 * FB-51 #3 (v0.5.19): align="stretch" lets <dd> fill the remaining
 * inline-grid track width so block-level form controls inside (e.g.
 * <slider-ui>, <select-ui>, <color-picker-ui>) reach the column edge
 * rather than shrink-wrapping to content.
 */

import { describe, it, expect, beforeAll, beforeEach, afterEach } from 'vitest';
import { readFileSync } from 'node:fs';
import { resolve, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const HERE = dirname(fileURLToPath(import.meta.url));

beforeAll(async () => {
  await import('./description-list.js');
});

describe('<description-list-ui> align="stretch" (FB-51 #3)', () => {
  let host;
  let dl;

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

    dl = document.createElement('description-list-ui');
    dl.setAttribute('layout', 'inline');
    dl.setAttribute('align', 'stretch');

    const dt = document.createElement('dt');
    dt.textContent = 'Source hue';
    const dd = document.createElement('dd');
    dd.id = 'fb51-stretch-dd';
    const probe = document.createElement('div');
    probe.id = 'fb51-stretch-probe';
    probe.textContent = 'inner';
    dd.appendChild(probe);
    dl.appendChild(dt);
    dl.appendChild(dd);

    host.appendChild(dl);
    await new Promise((r) => setTimeout(r, 50));
  });

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

  it('CSS source declares justify-self: stretch + width: 100% for align="stretch" inline layout', () => {
    const cssText = readFileSync(resolve(HERE, 'description-list.css'), 'utf8');
    expect(cssText).toMatch(/\[layout="inline"\]\[align="stretch"\][^{]*\{[^}]*justify-self:\s*stretch/);
    expect(cssText).toMatch(/\[layout="inline"\]\[align="stretch"\][^{]*\{[^}]*width:\s*100%/);
  });

  it('host carries the align="stretch" attribute (CSS selector match precondition)', () => {
    expect(dl.getAttribute('align')).toBe('stretch');
    expect(dl.getAttribute('layout')).toBe('inline');
  });

  it('yaml enum includes "stretch" (schema contract)', () => {
    const yamlText = readFileSync(resolve(HERE, 'description-list.yaml'), 'utf8');
    // Match the align enum block specifically (between `align:` and the next prop).
    const alignBlock = yamlText.match(/align:[\s\S]*?(?=\n  \w+:)/)?.[0] || '';
    expect(alignBlock).toMatch(/enum:[\s\S]*-\s+start/);
    expect(alignBlock).toMatch(/enum:[\s\S]*-\s+between/);
    expect(alignBlock).toMatch(/enum:[\s\S]*-\s+stretch/);
  });
});
