///
/// 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 { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { FilterModule } from '../filter.module';
import { Filter } from '../interfaces/filter.interface';

@Component({
  selector: 'app-filter-dropdown-test',
  template: `
    <ux-filter-container>
      <ux-filter-dropdown [id]="id" [filters]="filters" [initial]="filters[0]"></ux-filter-dropdown>
    </ux-filter-container>
  `,
  imports: [FilterModule],
})
export class FilterDropdownComponentSpec {
  id: string = 'custom-filter-dropdown';

  filters: Filter[] = [
    {
      group: 'Author',
      title: 'Author',
      name: 'Author (All)',
      initial: true,
    },
    {
      group: 'Author',
      title: 'Lily Clarke',
      name: 'Lily Clarke',
    },
    {
      group: 'Author',
      title: 'Jesse Bass',
      name: 'Jesse Bass',
    },
    {
      group: 'Author',
      title: 'Iva Rogers',
      name: 'Iva Rogers',
    },
  ];
}

describe('Filter Dropdown', () => {
  let fixture: ComponentFixture<FilterDropdownComponentSpec>;
  let component: FilterDropdownComponentSpec;
  let nativeElement: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FilterModule, NoopAnimationsModule, FilterDropdownComponentSpec],
    }).compileComponents();

    fixture = TestBed.createComponent<FilterDropdownComponentSpec>(FilterDropdownComponentSpec);
    component = fixture.componentInstance;
    nativeElement = fixture.nativeElement;
    fixture.detectChanges();
  });

  it('should have the correct IDs if a custom ID has been provided on the component', () => {
    expect(getMenuButton().id).toBe('custom-filter-dropdown-trigger');
    toggleMenu();

    getMenuItems().forEach((item, index) =>
      expect(item.id).toBe('custom-filter-dropdown-item-' + index)
    );
  });

  it('should give each filter the provided ID if specified on the Filter object', () => {
    // add an id property to all the filters
    component.filters.forEach((filter, index) => (filter.id = `filter-${index}`));
    fixture.detectChanges();

    toggleMenu();

    getMenuItems().forEach((item, index) => expect(item.id).toBe('filter-' + index));
  });

  function getMenuButton(): HTMLElement {
    return nativeElement.querySelector('.filter-dropdown');
  }

  function toggleMenu(): void {
    getMenuButton().click();
    fixture.detectChanges();
  }

  function getMenu(): HTMLElement {
    return document.querySelector('.ux-menu');
  }

  function getMenuItems(): HTMLElement[] {
    return Array.from(getMenu().querySelectorAll('[uxmenuitem]'));
  }
});