import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';

import { ActivitiesComponent } from './activities.component';
import {ActivitiesService} from './activities.service';
import {of} from 'rxjs';
import {LocalizationPipe} from './localize';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ActivityModalComponent} from './activity-modal/activity-modal.component';
import {EditPlanModalComponent} from './edit-plan-modal/edit-plan-modal.component';
import {DataFieldComponent} from './data-field/data-field.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {WeekNumberPipe} from '../pipes/week-number.pipe';
import {ModalComponent} from '../modals/modal/modal.component';
import {MatIcon, MatIconModule} from '@angular/material/icon';
import {Component, Input} from '@angular/core';
import {DirtyGuard} from '../confirm-navigation-if-dirty.framework';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {CarePlanService} from '../api/care-plan.service';
import {ActivatedRoute} from '@angular/router';
import {AngularMaterialModule} from '../modules/angular-material.module';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'mat-icon',
  template: '<span></span>'
})
class MockMatIconComponent {
  @Input() svgIcon: any;
  @Input() fontSet: any;
  @Input() fontIcon: any;
}

@Component({
  selector: 'app-general-information-bar',
  template: '<ng-content></ng-content>'
})
class MockGeneralInfoBarComponent {
  // tslint:disable-next-line:no-input-rename
  @Input('fixed-at') fixedAt = 0;
}
@Component({
  selector: 'app-measurements-modal',
  template: '<ng-content></ng-content>'
})
class MockMeasurementsModalComponent {
  // tslint:disable-next-line:no-input-rename
  @Input('fixed-at') fixedAt = 0;
}

describe('ActivitiesComponent', () => {
  let component: ActivitiesComponent;
  let fixture: ComponentFixture<ActivitiesComponent>;
  let activatedRouteStub: ActivatedRoute;
  let activitiesServiceStub: ActivitiesService;
  let carePlanServiceStub: CarePlanService;

  beforeEach(async () => {
    activatedRouteStub = {
      queryParamMap: of({has: () => false})
    } as any;
    carePlanServiceStub = {carePlan$: of(undefined)} as any;
    activitiesServiceStub = {
      get: of([...Array(20).keys()].map((index) => ({id: index}))),
      openActivityModalEvent$: of(undefined),
      openNoteModalEvent$: of(undefined),
      openMeasurementsModalEvent$: of(undefined),
      emitOpenActivityModalEvent: () => of(undefined),
      selectedDataCard$: of(undefined),
      futureActivities$: of([
        {id: '1', status: 'expected'},
        {id: '2', status: 'expected'},
        {id: '3', status: 'expected'},
      ]),
      pastActivities$: of(undefined)
    } as any;

    await TestBed.configureTestingModule({
      declarations: [
        ActivitiesComponent,
        LocalizationPipe,
          ActivityModalComponent,
        EditPlanModalComponent,
        DataFieldComponent,
        WeekNumberPipe,
        ModalComponent,
        MockGeneralInfoBarComponent,
        MockMeasurementsModalComponent,
      ],
      providers: [
        {provide: ActivitiesService, useValue: activitiesServiceStub},
        {provide: DirtyGuard, useValue: {canDeactivate: () => true}},
        {provide: CarePlanService, useValue: carePlanServiceStub},
        {provide: ActivatedRoute, useValue: activatedRouteStub}
      ],
      imports: [
        ReactiveFormsModule,
        BrowserAnimationsModule,
        BrowserModule,
        FormsModule,
        AngularMaterialModule,
        HttpClientTestingModule,
      ]
    })
      .overrideModule(MatIconModule, {
        remove: {
          declarations: [MatIcon],
          exports: [MatIcon]
        },
        add: {
          declarations: [MockMatIconComponent],
          exports: [MockMatIconComponent]
        }
      })
      .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ActivitiesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should scroll into view', () => {
    component.onScroll();
  });

  it('should add an undefined activity', () => {
    const spy = spyOn(activitiesServiceStub, 'emitOpenActivityModalEvent').and.callThrough();
    component.addActivity();
    expect(spy).toHaveBeenCalledWith(undefined);
  });
  it('should scroll future activities into view', fakeAsync(() => {
    // assuming that env is set and ready
    fixture.detectChanges();
    component.upcomingActivities = {
      nativeElement: {
        getBoundingClientRect: () => ({ top: 0 }),
      }
    };
    const spy = spyOn(window, 'scrollTo').and.callThrough();
    component.scrollToActivities();
    tick(500);
    fixture.detectChanges();
    expect(spy).toHaveBeenCalled();
  }));
});