import { constructWithInjector } from "../../../testing/construct-with-injector";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { Component, ViewChild } from "@angular/core";
import { By } from "@angular/platform-browser";

// Load the implementations that should be tested
import { SamTabsComponent, SamTabComponent } from "./tabs.component";
import { ChangeDetectorRef } from "@angular/core";

@Component({
  template: `
    <sam-tabs #tabs>
      <sam-tab #tab1 tabTitle="test1">Content Goes Here</sam-tab>
      <sam-tab #tab2 tabTitle="test2">More Content Goes Here</sam-tab>
    </sam-tabs>
  `,
  standalone: false,
})
class TabsDefault {
  @ViewChild("tabs", { static: true }) comp: SamTabsComponent;
  @ViewChild("tabs", { static: true }) tab1: SamTabComponent;
  @ViewChild("tabs", { static: true }) tab2: SamTabComponent;
}

describe("The Sam Tabs component", () => {
  describe("isolated tests", () => {
    let component: SamTabsComponent;
    const cdr: ChangeDetectorRef = undefined;
    beforeEach(() => {
      component = constructWithInjector(
        [{ provide: ChangeDetectorRef, useValue: cdr }],
        () => new SamTabsComponent()
      );
    });

    it("should set size and theme", () => {
      component.size = "default";
      expect(component.size).toBe("default");

      component.size = "notvalid";
      expect(component.size).toBe("default");

      component.theme = "separate";
      expect(component.theme).toBe("separate");

      component.theme = "notvalid";
      expect(component.theme).toBe("separate");
    });
  });
  describe("rendered tests", () => {
    let component: TabsDefault;
    let fixture: ComponentFixture<TabsDefault>;

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [SamTabsComponent, SamTabComponent, TabsDefault],
      });
      fixture = TestBed.createComponent(TabsDefault);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it("should compile", function () {
      expect(true).toBe(true);
      expect(component.comp.tabs.toArray()[0].active).toBe(true);
    });

    it("should set active tab", function () {
      component.comp.active = 1;
      component.comp._setActiveTab();
      fixture.detectChanges();
      expect(component.comp.tabs.toArray()[1].active).toBe(true);

      component.comp.selectTab(component.tab1, 0);
      fixture.detectChanges();
      expect(component.comp.active).toBe(0);
    });

    it("should select a tab via keyboard (Enter) same as click", function () {
      const tabLinks = fixture.debugElement.queryAll(By.css("a.item"));
      const secondTabLink = tabLinks[1].nativeElement;
      secondTabLink.dispatchEvent(
        new KeyboardEvent("keydown", { key: "Enter" })
      );
      fixture.detectChanges();
      expect(component.comp.active).toBe(1);
    });

    it("should not activate a disabled tab via click or keyboard, and should remove it from the tab order", function () {
      component.comp.tabs.toArray()[1].disabled = true;
      fixture.detectChanges();

      const tabLinks = fixture.debugElement.queryAll(By.css("a.item"));
      const disabledTabLink = tabLinks[1].nativeElement;
      expect(disabledTabLink.getAttribute("tabindex")).toBe("-1");

      disabledTabLink.dispatchEvent(new MouseEvent("click"));
      disabledTabLink.dispatchEvent(
        new KeyboardEvent("keydown", { key: "Enter" })
      );
      fixture.detectChanges();

      expect(component.comp.active).toBe(0);
    });
  });
});