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

import { HierarchicalDropdownComponent } from './hierarchical-dropdown.component';
import { FILTER_DATA } from 'projects/esp-common/src/lib/mockup';

describe('HierarchicalDropdownComponent', () => {
	let component: HierarchicalDropdownComponent;
	let fixture: ComponentFixture<HierarchicalDropdownComponent>;

	beforeEach(waitForAsync(() => {
		TestBed.configureTestingModule({
			declarations: [HierarchicalDropdownComponent],
		}).compileComponents();
	}));

	beforeEach(() => {
		fixture = TestBed.createComponent(HierarchicalDropdownComponent);
		component = fixture.componentInstance;
		component.hierarchicalSelectOptions = FILTER_DATA.timeperiod_dropdown_values;
		component.hierarchicalSelectOptions.children[0].label = 'SomeLabel';
		component.dropdownName = 'timePeriod';
		component.selectAllLabel = '';
		component.showOptions = true;
		fixture.detectChanges();
	});

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

	it('Should contain dropdown option element', () => {
		const option = fixture.debugElement.nativeElement.querySelectorAll('.dropdown-option');
		expect(option).not.toBe(null);
	});

	it('Shoud have count of dropdown options based on input values', () => {
		const option = fixture.debugElement.nativeElement.querySelectorAll('.dropdown-option');
		expect(option.length).toBe(15);
	});

	it('Should show options on click ', () => {
		component.showOptions = false;
		component.toggleDropdown();
		expect(component.showOptions).toEqual(true);
	});

	it('Should uncheck and check the value if clicked on option ', () => {
		component.hierarchicalDropdownSelected();
		const firstCheckBox = fixture.debugElement.nativeElement.querySelector('.checkbox');
		firstCheckBox.click();
		expect(component.hierarchicalSelectOptions.children[0].selected).toEqual(false);
		firstCheckBox.click();
		expect(component.hierarchicalSelectOptions.children[0].selected).toEqual(true);
	});

	it('Should close dropdown when clicked outside the dropdown ', () => {
		const event = new MouseEvent('click');
		component.onMenuDeselect(event);
		expect(component.showOptions).toEqual(false);
	});

	it('Should show default select label if select all label is not passed', () => {
		component.selectAllLabel = null;
		fixture.detectChanges();
		expect(component.getDropdownLabel()).toEqual('All selected');
	});

	it('Should unselect parent on unselection of all children', () => {
		component.hierarchicalSelectOptions.children[0].children[0].selected = false;
		component.hierarchicalSelectOptions.children[0].children[1].selected = false;
		component.hierarchicalSelectOptions.children[0].children[2].selected = false;
		component.hierarchicalSelectOptions.children[0].children[3].selected = false;

		component.dropdownName = null;
		fixture.detectChanges();
		const e = { stopPropagation: () => {} };
		const index = 0;
		component.changeFilter(e, index);
		component.hierarchicalDropdownSelected();
		expect(component.hierarchicalSelectOptions.children[0].selected).toEqual(false);
	});

	it('Should change label to None on unselection of all options', () => {
		component.hierarchicalSelectOptions.children[0].selected = false;
		component.hierarchicalSelectOptions.children[1].selected = false;
		component.hierarchicalSelectOptions.children[2].selected = false;
		fixture.detectChanges();
		const dropdownLabel = component.getDropdownLabel();
		expect(dropdownLabel).toEqual('None');
	});

	it('Should select all children on selection of parent', () => {
		component.hierarchicalSelectOptions.children[0].selected = true;
		component.hierarchicalSelectOptions.children[1].selected = true;
		component.hierarchicalSelectOptions.children[2].selected = false;
		component.hierarchicalSelectOptions.children[2].children = [
			{
				value: '1',
				selected: false,
				children: [{ value: '2' }],
			},
		];
		fixture.detectChanges();
		const e = { stopPropagation: () => {} };
		const index = 2;
		component.changeFilter(e, index);
		const dropdownLabel = component.getDropdownLabel();
		expect(dropdownLabel).toEqual('All selected');
	});

	it('Should change label to None on unselection of all options', () => {
		component.hierarchicalSelectOptions.children[0].selected = true;
		component.hierarchicalSelectOptions.children[1].selected = false;
		component.hierarchicalSelectOptions.children[2].selected = false;
		fixture.detectChanges();
		const dropdownLabel = component.getDropdownLabel();
		expect(dropdownLabel).toEqual('SomeLabel');
	});
});