///
/// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { BehaviorSubject } from 'rxjs';
import { Color } from '../../common/index';
import { ResizeDimensions, ResizeService } from '../../directives/resize/index';
import { ColorServiceModule, colorSets } from '../../services/color/index';
import { TooltipModule } from '../tooltip/index';
import { NestedDonutChartComponent } from './nested-donut-chart.component';

export class MockResizeService {
  addResizeListener(target: HTMLElement): BehaviorSubject<ResizeDimensions> {
    return new BehaviorSubject<ResizeDimensions>({
      width: target.offsetWidth,
      height: target.offsetHeight,
    });
  }

  // eslint-disable-next-line @typescript-eslint/no-empty-function
  removeResizeListener(_target: HTMLElement): void {}
}

describe('Nested Donut Chart Component', () => {
  let component: NestedDonutChartComponent;
  let fixture: ComponentFixture<NestedDonutChartComponent>;
  let element: HTMLElement;
  let chart: SVGElement;
  let tracks: NodeListOf<SVGPathElement>;
  let arcs: NodeListOf<SVGPathElement>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        TooltipModule,
        ColorServiceModule.forRoot(colorSets.keppel),
        NestedDonutChartComponent,
      ],
      providers: [{ provide: ResizeService, useClass: MockResizeService }],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(NestedDonutChartComponent);
    component = fixture.componentInstance;
    element = fixture.nativeElement;

    // set the default size
    element.style.width = '165px';
    element.style.height = '165px';

    component.dataset = [
      { name: 'To be retained', value: 42, color: Color.Ok },
      { name: 'Potentially sensitive', value: 33, color: Color.Warning },
      { name: 'Sensitive', value: 9, color: Color.Critical },
    ];

    component.animationDuration = 0;

    fixture.detectChanges();

    chart = element.querySelector('.ux-nested-donut-chart');
    tracks = chart.querySelectorAll('.ux-nested-donut-chart-track');
    arcs = chart.querySelectorAll('.ux-nested-donut-chart-arc');
  });

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

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

  it('should set the correct sizes', () => {
    // the outermost chart element should get the correct size
    expect(element.offsetWidth).toBe(165);
    expect(element.offsetWidth).toBe(165);

    // the chart element should also be the same size
    expect(chart.getAttribute('width')).toBe('165');
    expect(chart.getAttribute('height')).toBe('165');
  });

  it('should correctly position the content area', () => {
    const content: HTMLElement = element.querySelector('.ux-nested-donut-chart-content');

    expect(content.style.top).toBe('48px');
    expect(content.style.right).toBe('48px');
    expect(content.style.bottom).toBe('48px');
    expect(content.style.left).toBe('48px');
    expect(content.style.width).toBe('69px');
    expect(content.style.height).toBe('69px');
  });

  it('should have the correct number of tracks', () => {
    expect(tracks.length).toBe(3);
  });

  it('should have the correct number of arcs', () => {
    expect(arcs.length).toBe(3);
  });

  it('should set the correct track colors', () => {
    expect(tracks.item(0).style.fill).toBe('rgb(238, 238, 238)');
    expect(tracks.item(1).style.fill).toBe('rgb(238, 238, 238)');
    expect(tracks.item(2).style.fill).toBe('rgb(238, 238, 238)');
  });

  it('should set the correct arc colors', () => {
    expect(arcs.item(0).style.fill).toBe('rgb(59, 170, 67)');
    expect(arcs.item(1).style.fill).toBe('rgb(255, 144, 72)');
    expect(arcs.item(2).style.fill).toBe('rgb(255, 69, 79)');
  });

  it('should update the dataset when the @Input changes', done => {
    component.dataset = [
      { name: 'To be retained', value: 42, color: Color.Critical },
      { name: 'Potentially sensitive', value: 33, color: Color.Warning },
      { name: 'Sensitive', value: 9, color: Color.Ok },
    ];

    detectChanges();

    // wait for tweening to finish
    setTimeout(() => {
      expect(arcs.item(0).style.fill).toBe('rgb(255, 69, 79)');
      expect(arcs.item(1).style.fill).toBe('rgb(255, 144, 72)');
      expect(arcs.item(2).style.fill).toBe('rgb(59, 170, 67)');
      done();
    }, 100);
  });

  it('should set the trackColor when the @Input changes', done => {
    component.trackColor = 'rgb(255, 0, 0)';

    detectChanges();

    // wait for tweening to finish
    setTimeout(() => {
      expect(tracks.item(0).style.fill).toBe('rgb(255, 0, 0)');
      expect(tracks.item(1).style.fill).toBe('rgb(255, 0, 0)');
      expect(tracks.item(2).style.fill).toBe('rgb(255, 0, 0)');
      done();
    }, 100);
  });

  /**
   * Workaround for TestBed bug on components with ChangeDetectionStrategy.OnPush
   * https://github.com/angular/angular/issues/12313#issuecomment-263978801
   */
  function detectChanges(): void {
    (component as any)._changeDetector.markForCheck();
    fixture.detectChanges();
    component.ngOnChanges();
  }
});