///
/// Copyright 2015-2026 Micro Focus or one of its affiliates.
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
///      http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

import { CommonModule } from '@angular/common';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { bufferCount } from 'rxjs/operators';
import { AccessibilityModule } from '../../directives/accessibility/index';
import { FocusIfModule } from '../../directives/focus-if/index';
import { IconModule } from '../icon/index';
import { TypeaheadModule } from '../typeahead/index';
import { TagInputComponent } from './tag-input.component';

describe('Tag Input Component', () => {
  let component: TagInputComponent<string>;
  let nativeElement: HTMLElement;
  let fixture: ComponentFixture<TagInputComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        AccessibilityModule,
        CommonModule,
        FormsModule,
        FocusIfModule,
        IconModule,
        TypeaheadModule,
        TagInputComponent,
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(TagInputComponent);
    component = fixture.componentInstance;
    nativeElement = fixture.nativeElement;
  });

  afterEach(() => fixture.nativeElement.remove());

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

  it('should emit tagsChange each time an item is selected', done => {
    // run initial change detection
    fixture.detectChanges();

    // listen for tags
    const subscription = component.tagsChange.pipe(bufferCount(2)).subscribe(response => {
      expect(response.length).toBe(2);
      done();
    });

    // add tags
    component.commitTypeahead('One');
    component.commitTypeahead('Two');

    subscription.unsubscribe();
  });

  it('should not emit inputChange on initialization', () => {
    const onInputChange = jasmine.createSpy('inputChange');
    const subscription = component.inputChange.subscribe(onInputChange);

    // run initial change detection
    fixture.detectChanges();

    expect(onInputChange).not.toHaveBeenCalled();

    subscription.unsubscribe();
  });

  it('should not emit tagsChange on initialization', () => {
    const onTagsChange = jasmine.createSpy('TagsChange');
    const subscription = component.inputChange.subscribe(onTagsChange);

    // run initial change detection
    fixture.detectChanges();

    expect(onTagsChange).not.toHaveBeenCalled();

    subscription.unsubscribe();
  });

  it('should initialize value to empty string', () => {
    // run initial change detection
    fixture.detectChanges();

    expect(component.input).toBe('');
  });

  it('should emit inputChange when input changed', () => {
    const onInputChange = jasmine.createSpy('inputChange');
    const subscription = component.inputChange.subscribe(onInputChange);
    // run initial change detection
    fixture.detectChanges();

    component.setInputValue('one');

    expect(onInputChange).toHaveBeenCalled();

    subscription.unsubscribe();
  });

  it('should add a required attribute to the input when required is true', () => {
    component.required = true;

    fixture.detectChanges();

    const inputElementEmpty = nativeElement.querySelector<HTMLInputElement>('input.ux-tag-input');
    const attributeRequired = inputElementEmpty.hasAttribute('required');

    expect(attributeRequired).toBe(true);
  });

  it('should emit inputBlur when the input field loses focus', () => {
    fixture.detectChanges();

    const onInputBlur = jasmine.createSpy('inputBlur');
    const subscription = component.inputBlur.subscribe(onInputBlur);
    const inputElement = nativeElement.querySelector<HTMLInputElement>('input.ux-tag-input');

    inputElement.dispatchEvent(new Event('blur'));

    fixture.detectChanges();

    expect(onInputBlur).toHaveBeenCalled();
    subscription.unsubscribe();
  });

  it('should have an unique id for the input element', () => {
    fixture.detectChanges();

    const inputId = component.tagInput.nativeElement.id;
    const elementsWithId = document.querySelectorAll(`#${inputId}`);

    expect(elementsWithId.length).toBe(1);
  });

  it('should apply aria-labelledby to the input element', () => {
    component.ariaLabelledby = 'test-id';
    fixture.detectChanges();

    const input = document.querySelector<HTMLInputElement>('input.ux-tag-input');

    expect(input.getAttribute('aria-labelledby')).toContain('test-id');
  });
});