import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { of } from 'rxjs';
import { ApolloModule } from 'apollo-angular';
import { RightMenuModalModule } from 'projects/esp-common/src/lib/components/functional/modals/right-menu-modal/right-menu-modal.module';
import { HeaderComponent } from './header.component';
import { USER } from 'projects/esp-common/src/lib/mockup';
import { KeycloakService } from 'projects/esp-common/src/lib/utils/keycloak.service';
import { GraphQLService } from 'projects/esp-common/src/lib/utils/graphql.service';
const mockFn = jest.fn();
const graphQLMockService = { query: () => of(USER) };
import { UserConfigService } from 'projects/esp-common/src/lib/utils/user-config.service';
const keycloakMockService = {
	logout: mockFn,
};

class MockRouter {
	private ne = new NavigationEnd(
		0,
		'http://localhost:4200/demand-forecasting',
		'http://localhost:4200/predictive-ordering'
	);
	private events = new Observable(observer => {
		observer.next(this.ne);
		observer.complete();
	});
	navigate = mockFn;
}

describe('HeaderComponent', () => {
	let component: HeaderComponent;
	let fixture: ComponentFixture<HeaderComponent>;
	let router: Router;
	let userConfig: UserConfigService;
	let graphQL;
	beforeAll(() => {
		window.location.pathname = '/demand-forecasting:';
	});

	beforeEach(waitForAsync(() => {
		TestBed.configureTestingModule({
			imports: [ApolloModule, RightMenuModalModule, RouterTestingModule],
			declarations: [HeaderComponent],
			providers: [
				{ provide: GraphQLService, useValue: graphQLMockService },
				{ provide: KeycloakService, useValue: keycloakMockService },
				{ provide: Router, useClass: MockRouter },
			],
		}).compileComponents();
		graphQL = TestBed.inject(GraphQLService);
		userConfig = TestBed.inject(UserConfigService);
	}));

	beforeEach(() => {
		fixture = TestBed.createComponent(HeaderComponent);
		component = fixture.componentInstance;
		fixture.detectChanges();
		router = TestBed.inject(Router);
	});

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

	it('should be able to update header title', () => {
		userConfig.getAppConfig('df');
		const header = 'Demand Forecasting';
		expect(component.i18n['header']).toEqual(header);
		router.events.subscribe();
	});

	it('should call Toggle Menu Function for Side Bar', () => {
		const position = 'left';
		component.toggleMenuSideBar = jest.fn();
		component.toggleMenuSideBar(position, 'leftSideMenu');
		expect(component.toggleMenuSideBar).toHaveBeenCalledWith(position, 'leftSideMenu');
	});

	it('side menu should open', () => {
		const position = 'left';
		let active = false;
		component.toggleMenuSideBar(position, 'leftSideMenu');
		active = !active;
		expect(component.sideBarMenuStatus).toEqual(active);
	});

	it('should call logout function on click of logout ', () => {
		component.performRightMenuFunctions('Log Out');
		component.performRightMenuFunctions('Save as Card');
		component.performRightMenuFunctions('Load Scenario');
		component.performRightMenuFunctions('Load Card');
		expect(mockFn).toHaveBeenCalled();
	});

	it('should call logout, save as card, load scenario & load card functions on click of respective buttons ', () => {
		component.saveAsCard = jest.fn();
		component.loadScenario = jest.fn();
		component.loadCard = jest.fn();

		component.performRightMenuFunctions('Log Out');
		component.performRightMenuFunctions('Save as Card');
		component.performRightMenuFunctions('Load Scenario');
		component.performRightMenuFunctions('Load Card');
		expect(mockFn).toHaveBeenCalled();
		expect(component.saveAsCard).toHaveBeenCalled();
		expect(component.loadScenario).toHaveBeenCalled();
		expect(component.loadCard).toHaveBeenCalled();
	});
});