import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { BulletListComponent } from './bullet-list.component';
import { isaActionChevronRight } from '@isa/icons';

// Mock icons for testing
const testIcons = {
  isaActionChevronRight,
  customIcon: '<svg></svg>',
  customTestIcon: '<svg></svg>',
};

// Test host component to verify content projection
@Component({
  template: `
    <ui-bullet-list [icon]="testIcon">
      <div data-what="test-content">Test content</div>
    </ui-bullet-list>
  `,
  standalone: true,
  imports: [BulletListComponent],
})
class TestHostComponent {
  testIcon = 'testIcon';
}

describe('BulletListComponent', () => {
  let component: BulletListComponent;
  let fixture: ComponentFixture<BulletListComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [BulletListComponent],
      providers: [provideIcons(testIcons)],
    }).compileComponents();

    fixture = TestBed.createComponent(BulletListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have default icon value', () => {
    expect(component.icon()).toBe('isaActionChevronRight');
  });

  it('should accept custom icon input', () => {
    fixture.componentRef.setInput('icon', 'customIcon');
    fixture.detectChanges();

    expect(component.icon()).toBe('customIcon');
  });

  it('should render with correct CSS class', () => {
    const hostElement = fixture.nativeElement;
    expect(hostElement.classList.contains('ui-bullet-list')).toBe(true);
  });

  it('should project content correctly', async () => {
    const hostFixture = TestBed.createComponent(TestHostComponent);
    hostFixture.detectChanges();

    const projectedContent = hostFixture.nativeElement.querySelector('[data-what="test-content"]');
    expect(projectedContent).toBeTruthy();
    expect(projectedContent.textContent.trim()).toBe('Test content');
  });

  it('should pass icon to child components via dependency injection', async () => {
    const hostFixture = TestBed.createComponent(TestHostComponent);
    const hostComponent = hostFixture.componentInstance;
    hostComponent.testIcon = 'customTestIcon';
    hostFixture.detectChanges();

    const bulletListComponent = hostFixture.debugElement.query(
      sel => sel.componentInstance instanceof BulletListComponent
    ).componentInstance;

    expect(bulletListComponent.icon()).toBe('customTestIcon');
  });
});