import { TestBed, async, ComponentFixture, waitForAsync } from '@angular/core/testing';
import { of } from 'rxjs';
import { ApolloTestingModule, ApolloTestingController} from 'apollo-angular/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SidebarModule } from 'ng-sidebar';
import { RightSideMenuNavComponent } from './right-side-menu-nav/right-side-menu-nav.component';
import { SideMenuNavComponent } from './side-menu-nav/side-menu-nav.component';
import { ToastModule } from 'libs/components/generic/toast/toast.module';
import { SideFilterPanelModule } from 'libs/components/functional/side-filter-panel/side-filter-panel.module';
import { RightMenuModalModule } from 'libs/components/functional/modals/right-menu-modal/right-menu-modal.module';
import { USER } from 'mockup';
import { AlertsSidePanelModule } from 'libs/components/functional/alerts-side-panel/alerts.side.panel.module';
import { SidePanelsService } from 'libs/utils/side-panels.service';
import { KeycloakService } from 'libs/utils/keycloak.service';
import { ToolbarPredictiveService } from 'libs/pages/predictive-ordering/dpo-query/predictive-ordering.toolbar.service';
import { filter } from 'lodash';
import { GraphQLService } from 'libs/utils/graphql.service';
import { LoaderModule } from 'libs/components/generic/loader/loader.module';
import { BsModalService, ComponentLoaderFactory, PositioningService } from 'ngx-bootstrap';
import { CommonSideFilterPanelService } from 'libs/components/functional/side-filter-panel/common-side-filter-panel.service';

const mockFn = jest.fn();
const graphQLMockService = { query: () => of(USER) };
const keycloakMockService = {
	logout: mockFn,
};
let commonSideFilterPanel;

describe('AppComponent', () => {
	let component: AppComponent;
	let fixture: ComponentFixture<AppComponent>;
	let sidePanel: SidePanelsService;
	let toolbarPredective: ToolbarPredictiveService;
	let graphQL;
	let controller: ApolloTestingController;

	beforeAll(() => {
		// localStorage.setItem('aeapUser', JSON.stringify(USER));
		window.location.pathname = '/demand-forecasting:';
	});

	beforeEach(waitForAsync(() => {
		TestBed.configureTestingModule({
			imports: [
				ApolloTestingModule,
				RouterTestingModule,
				SidebarModule,
				ToastModule,
				SideFilterPanelModule,
				AlertsSidePanelModule,
				RightMenuModalModule,
				LoaderModule,
			],
			declarations: [AppComponent, HeaderComponent, FooterComponent, RightSideMenuNavComponent, SideMenuNavComponent],
			providers: [
				SidePanelsService,
				ToolbarPredictiveService,
				{ provide: KeycloakService, useValue: keycloakMockService },
				{ provide: GraphQLService, useValue: graphQLMockService },
				BsModalService,
				ComponentLoaderFactory,
				PositioningService,
			],
		}).compileComponents();
		graphQL = TestBed.inject(GraphQLService);
		controller = TestBed.inject(ApolloTestingController);
	}));

	beforeEach(() => {
		fixture = TestBed.createComponent(AppComponent);
		sidePanel = TestBed.inject(SidePanelsService);
		toolbarPredective = TestBed.inject(ToolbarPredictiveService);
		commonSideFilterPanel = TestBed.inject(CommonSideFilterPanelService);
		component = fixture.componentInstance;
		fixture.detectChanges();
		component.ngOnInit();
	});

	afterEach(() => {
		controller.verify();
	});

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

	it('should call the function onOpened()', () => {
		// this should be updated after onOpened() functionality
		expect(component.onOpened()).toEqual(undefined);
	});

	it('should call the function onClosed()', () => {
		component.sideBarMenuConfig = {
			status: false,
			position: this.position,
			type: 'leftSideMenu',
			closeOnClickOutside: true,
		};
		sidePanel.editSidePanelConfig = jest.fn();
		component.onClosed();
		expect(sidePanel.editSidePanelConfig).toHaveBeenCalledWith(component.sideBarMenuConfig);
	});

	it('should call the function filter values selected', () => {
		const filterSelected = {
			allowMultiselect: false,
			data: [
				{ value: 'filter1', selected: true, count: 1 },
				{ value: 'filter2', selected: false, count: 1 },
			],
		};
		commonSideFilterPanel.filterValuesSelected = jest.fn();
		component.filterValuesSelected(filterSelected);
		expect(commonSideFilterPanel.filterValuesSelected).toHaveBeenCalled();
	});
});