import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LabelComponent } from './label.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [LabelComponent],
    }).compileComponents();

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

  describe('Component Setup and Initialization', () => {
    it('should create', () => {
      expect(component).toBeTruthy();
    });

    it('should have default active as false', () => {
      expect(component.active()).toBe(false);
    });

    it('should accept active input', () => {
      fixture.componentRef.setInput('active', true);
      fixture.detectChanges();
      expect(component.active()).toBe(true);
    });

    it('should return null for activeClass when not active', () => {
      expect(component.activeClass()).toBeNull();
    });

    it('should return active class when active is true', () => {
      fixture.componentRef.setInput('active', true);
      fixture.detectChanges();
      expect(component.activeClass()).toBe('ui-label--active');
    });
  });

  describe('Template Rendering', () => {
    it('should display content with default classes', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.classList.contains('ui-label')).toBe(true);
    });

    it('should display active class when active is true', () => {
      fixture.componentRef.setInput('active', true);
      fixture.detectChanges();

      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.classList.contains('ui-label--active')).toBe(true);
    });

    it('should not display active class when active is false', () => {
      fixture.componentRef.setInput('active', false);
      fixture.detectChanges();

      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.classList.contains('ui-label--active')).toBe(false);
    });
  });

  describe('Component Structure', () => {
    it('should have proper host class binding', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.classList.contains('ui-label')).toBe(true);
    });

    it('should have E2E testing attributes', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.getAttribute('data-what')).toBe('label');
      expect(hostElement.getAttribute('data-which')).toBe('label');
    });

    it('should have accessibility role', () => {
      const hostElement = fixture.debugElement.nativeElement;
      expect(hostElement.getAttribute('role')).toBe('status');
    });

    it('should update classes when active changes', () => {
      const hostElement = fixture.debugElement.nativeElement;

      // Initial state (not active)
      expect(hostElement.classList.contains('ui-label--active')).toBe(false);

      // Change to active
      fixture.componentRef.setInput('active', true);
      fixture.detectChanges();

      expect(hostElement.classList.contains('ui-label--active')).toBe(true);

      // Change back to not active
      fixture.componentRef.setInput('active', false);
      fixture.detectChanges();

      expect(hostElement.classList.contains('ui-label--active')).toBe(false);
    });
  });
});
