/* tslint:disable */
import {
  waitForAsync,
  ComponentFixture,
  TestBed,
  fakeAsync,
  tick,
} from "@angular/core/testing";
import { SamHierarchicalAutocompleteComponent } from "./autocomplete.component";
import { SamHierarchicalAutocompleteConfiguration } from "../models/SamHierarchicalAutocompleteConfiguration";
import { FormsModule } from "@angular/forms";
import {
  HierarchicalTreeSelectedItemModel,
  TreeMode,
} from "../hierarchical-tree-selectedItem.model";
import { By } from "@angular/platform-browser";
import "rxjs";
import { HierarchicalDataService } from "../hierarchical-test-service.spec";

describe("SamHierarchicalAutocompleteComponent", () => {
  let component: SamHierarchicalAutocompleteComponent;
  let fixture: ComponentFixture<SamHierarchicalAutocompleteComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(SamHierarchicalAutocompleteComponent);
    component = fixture.componentInstance;
    component.service = new HierarchicalDataService();
    component.model = new HierarchicalTreeSelectedItemModel();
    component.configuration = new SamHierarchicalAutocompleteConfiguration();
    component.configuration.id = "autoId";
    component.configuration.primaryKeyField = "id";
    component.model.treeMode = TreeMode.SINGLE;
    component.configuration.primaryTextField = "name";
    component.configuration.secondaryTextField = "subtext";
    component.configuration.debounceTime = 0;
    component.configuration.autocompletePlaceHolderText = "";
    fixture.detectChanges();
  });

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

  it("Should have an input", () => {
    fixture.detectChanges();
    const input = fixture.debugElement.query(By.css("input"));
    expect(input).toBeDefined();
  });

  it("Should have an input id", () => {
    fixture.detectChanges();
    const input = fixture.debugElement.query(By.css("input"));
    expect(input.attributes.id).toBe("autoId");
  });

  it("Should have empty results not exist", () => {
    fixture.detectChanges();
    expect(component.resultsListElement).toBe(undefined);
  });

  it("Should have empty results with invalid search", fakeAsync(() => {
    const event = "test search";
    component.textChange(event);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(1);
    const emptyItem = fixture.debugElement.query(By.css(".emptyResults"));
    expect(emptyItem).toBeTruthy();
  }));

  it("Should have results with minimumCharacterCountSearch", fakeAsync(() => {
    const event = "Level 7";
    component.configuration.minimumCharacterCountSearch = 3;
    component.textChange(event);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(3);
  }));

  it("Should have results key press", fakeAsync(() => {
    const event = "id";
    component.textChange(event);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[0]["highlighted"]).toBeTruthy();
  }));

  it("Should have empty results key press minimumCharacterCountSearch", fakeAsync(() => {
    const event = {
      key: "d",
      target: { value: "id" },
    };
    component.configuration.minimumCharacterCountSearch = 3;
    component.onKeydown(event);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list).toBe(null);
  }));

  it("Should have reuslts on focus", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[0]["highlighted"]).toBeTruthy();
  }));

  it.skip("Select second item with down and up arrows", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const downEvent = {
      key: "Down",
      target: { value: "id" },
    };
    component.onKeydown(downEvent);
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[1]["highlighted"]).toBeTruthy();
    const upEvent = {
      key: "Up",
      target: { value: "id" },
    };
    component.onKeydown(upEvent);
    tick();
    fixture.detectChanges();
    expect(component.results[0]["highlighted"]).toBeTruthy();
  }));

  it("Up arrow when on first item", fakeAsync(() => {
    component.inputFocusHandler();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[0]["highlighted"]).toBeTruthy();
    const upEvent = {
      key: "Up",
      target: { value: "id" },
    };
    component.onKeydown(upEvent);
    tick();
    fixture.detectChanges();
    expect(component.results[0]["highlighted"]).toBeTruthy();
  }));

  it("Down arrow when on over lists item", fakeAsync(() => {
    component.inputFocusHandler();
    tick();
    fixture.detectChanges();

    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[0]["highlighted"]).toBeTruthy();
    component.listItemHover(component.results.length - 1);
    fixture.detectChanges();
    tick();
    expect(
      component.results[component.results.length - 1]["highlighted"]
    ).toBeTruthy();
    const upEvent = {
      key: "Down",
      target: { value: "id" },
    };
    component.onKeydown(upEvent);
    tick();
    fixture.detectChanges();

    expect(component.results[10]["highlighted"]).toBeTruthy();
  }));

  it("Should have delete have results", fakeAsync(() => {
    const event = "id";
    component.textChange(event);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[0]["highlighted"]).toBeTruthy();
  }));

  it("Should have results Escape press", fakeAsync(() => {
    component.inputFocusHandler();
    tick();
    fixture.detectChanges();
    const listBefore = fixture.debugElement.query(
      By.css(".autocomplete-result")
    );
    expect(listBefore.nativeElement.children.length).toBe(11);
    const event = {
      key: "Escape",
      target: { value: "id" },
    };
    component.onKeydown(event);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const listAfter = fixture.debugElement.query(
      By.css(".autocomplete-result")
    );
    expect(listAfter).toBeFalsy();
  }));

  it("Should have reuslts on focus", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[0]["highlighted"]).toBeTruthy();
  }));

  it.skip("select item with enter key", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    expect(component.results[0]["highlighted"]).toBeTruthy();
    const event = {
      key: "Enter",
      target: { value: "id" },
    };
    component.onKeydown(event);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    expect(component.model.getItems().length).toBe(1);
  }));

  it("hover over item is highlighted", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    component.listItemHover(10);
    fixture.detectChanges();
    tick();
    expect(component.results[10]["highlighted"]).toBeTruthy();
  }));

  it("clearInput and results closed", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const list = fixture.debugElement.query(By.css(".autocomplete-result"));
    expect(list.nativeElement.children.length).toBe(11);
    component.clearInput();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const listAfter = fixture.debugElement.query(
      By.css(".autocomplete-result")
    );
    expect(listAfter).toBeFalsy();
  }));

  it("marks the highlighted result option as aria-selected", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const options = fixture.debugElement.queryAll(By.css('li[role="option"]'));
    expect(options[0].nativeElement.getAttribute("aria-selected")).toBe("true");
    expect(options[1].nativeElement.getAttribute("aria-selected")).toBe(
      "false"
    );
  }));

  it("selects a result via keyboard (Enter) same as click", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const firstOption = fixture.debugElement.query(
      By.css('li[role="option"]')
    ).nativeElement;
    firstOption.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
    fixture.detectChanges();
    expect(component.model.getItems().length).toBe(1);
  }));

  it("clears the input via keyboard (Enter) on the clear button, same as click", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const clearButton = fixture.debugElement.query(
      By.css('span[role="button"]')
    ).nativeElement;
    component.inputValue = "id";
    fixture.detectChanges();
    clearButton.dispatchEvent(new KeyboardEvent("keyup", { key: "Enter" }));
    fixture.detectChanges();
    expect(component.inputValue).toBe("");
  }));

  it("clears the input via keyboard (Space) on the clear button, same as click, and prevents page scroll", fakeAsync(() => {
    component.inputFocusHandler();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const clearButton = fixture.debugElement.query(
      By.css('span[role="button"]')
    ).nativeElement;
    component.inputValue = "id";
    fixture.detectChanges();
    const spaceEvent = new KeyboardEvent("keydown", { key: " " });
    const preventDefaultSpy = vi.spyOn(spaceEvent, "preventDefault");
    clearButton.dispatchEvent(spaceEvent);
    fixture.detectChanges();
    expect(component.inputValue).toBe("");
    expect(preventDefaultSpy).toHaveBeenCalled();
  }));
});