import { describe, it, expect } from 'vitest';
import { navColorFields } from './shared';
import { Menu } from '../../../components/basic/Menu';
import { Navbar } from '../../../components/basic/Navbar';

/*
 * Regression: the Menu component's color props (linkColor/linkHoverColor/
 * ctaBgColor/ctaTextColor) differ from the Navbar's (backgroundColor/textColor/
 * ctaColor). NavStylePanel's "Colors" section is shared across both, so it must
 * derive its fields from the actual props present — otherwise a Menu shows an
 * empty "Colors" dropdown with nothing to select.
 */
describe('navColorFields', () => {
  it('surfaces the Menu color props (bug: was empty for Menu)', () => {
    const menuProps = (Menu as any).craft.props;
    const keys = navColorFields(menuProps).map((f) => f.key);
    expect(keys).toContain('linkColor');
    expect(keys).toContain('linkHoverColor');
    expect(keys).toContain('ctaBgColor');
    expect(keys).toContain('ctaTextColor');
  });

  it('never returns an empty list for a Menu (no empty Colors dropdown)', () => {
    const menuProps = (Menu as any).craft.props;
    expect(navColorFields(menuProps).length).toBeGreaterThan(0);
  });

  it('surfaces the Navbar color props (incl. hover/ctaText the panel never exposed before)', () => {
    const navProps = (Navbar as any).craft.props;
    const keys = navColorFields(navProps).map((f) => f.key);
    // every field surfaced must be a real, consumed prop on the Navbar
    expect(keys).toContain('backgroundColor');
    expect(keys).toContain('textColor');
    expect(keys).toContain('hoverColor');
    expect(keys).toContain('ctaColor');
    expect(keys).toContain('ctaTextColor');
    // must NOT invent Menu-only props on a Navbar
    expect(keys).not.toContain('linkColor');
    expect(keys).not.toContain('ctaBgColor');
  });

  it('does not surface Navbar-only props on a Menu', () => {
    const menuProps = (Menu as any).craft.props;
    const keys = navColorFields(menuProps).map((f) => f.key);
    expect(keys).not.toContain('backgroundColor');
    expect(keys).not.toContain('hoverColor'); // Menu uses linkHoverColor
    expect(keys).not.toContain('ctaColor');
  });

  it('only returns fields whose prop is actually present', () => {
    // A bare Logo (text logo) has no link/cta color props -> should not invent them
    const keys = navColorFields({ backgroundColor: '#fff' }).map((f) => f.key);
    expect(keys).toEqual(['backgroundColor']);
  });
});
