import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoticeComponent } from './notice.component';
import { NoticePriority } from './types';

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

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

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

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

    it('should have default priority as high', () => {
      expect(component.priority()).toBe(NoticePriority.High);
    });

    it('should accept medium priority', () => {
      fixture.componentRef.setInput('priority', NoticePriority.Medium);
      fixture.detectChanges();
      expect(component.priority()).toBe(NoticePriority.Medium);
    });

    it('should accept low priority', () => {
      fixture.componentRef.setInput('priority', NoticePriority.Low);
      fixture.detectChanges();
      expect(component.priority()).toBe(NoticePriority.Low);
    });

    it('should have correct CSS class for high priority', () => {
      expect(component.priorityClass()).toBe('ui-notice--high');
    });

    it('should have correct CSS class for medium priority', () => {
      fixture.componentRef.setInput('priority', NoticePriority.Medium);
      fixture.detectChanges();
      expect(component.priorityClass()).toBe('ui-notice--medium');
    });

    it('should have correct CSS class for low priority', () => {
      fixture.componentRef.setInput('priority', NoticePriority.Low);
      fixture.detectChanges();
      expect(component.priorityClass()).toBe('ui-notice--low');
    });
  });

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

    it('should display content with medium priority classes', () => {
      fixture.componentRef.setInput('priority', NoticePriority.Medium);
      fixture.detectChanges();

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

    it('should display content with low priority classes', () => {
      fixture.componentRef.setInput('priority', NoticePriority.Low);
      fixture.detectChanges();

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

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

      expect(hostElement.classList.contains('ui-notice--high')).toBe(true);
      expect(hostElement.classList.contains('ui-notice--medium')).toBe(false);

      fixture.componentRef.setInput('priority', NoticePriority.Medium);
      fixture.detectChanges();

      expect(hostElement.classList.contains('ui-notice--high')).toBe(false);
      expect(hostElement.classList.contains('ui-notice--medium')).toBe(true);
    });
  });

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

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

    it('should have correct data-which for different priorities', () => {
      const hostElement = fixture.debugElement.nativeElement;

      expect(hostElement.getAttribute('data-which')).toBe('priority-high');

      fixture.componentRef.setInput('priority', NoticePriority.Medium);
      fixture.detectChanges();
      expect(hostElement.getAttribute('data-which')).toBe('priority-medium');

      fixture.componentRef.setInput('priority', NoticePriority.Low);
      fixture.detectChanges();
      expect(hostElement.getAttribute('data-which')).toBe('priority-low');
    });

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