import { ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { RouterTestingModule } from "@angular/router/testing";
import { Component, DebugElement } from '@angular/core';
import { IMenu, BixiLayoutModule } from '../';
import { TranslateModule } from '@ngx-translate/core';
import { BixiLayoutService } from '../layout.service';
import { TableOutline, UserOutline } from '@ant-design/icons-angular/icons';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NzIconModule } from 'ng-zorro-antd';
import { By } from '@angular/platform-browser';

const icons = [TableOutline, UserOutline];

describe('bixi layout', () => {
  let fixture: ComponentFixture<BixiMenuDemoComponent>;
  let srv: BixiLayoutService;
  let debugEle: DebugElement;
  let context: BixiMenuDemoComponent;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [BixiLayoutModule, TranslateModule.forRoot(), NzIconModule.forRoot(icons), RouterTestingModule.withRoutes([]), BrowserAnimationsModule, NoopAnimationsModule],
      providers: [BixiLayoutService],
      declarations: [BixiMenuDemoComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(BixiMenuDemoComponent);
    debugEle = fixture.debugElement;
    context = fixture.componentInstance;
  });

  beforeEach(inject([BixiLayoutService], (layoutService: BixiLayoutService) => {
    srv = layoutService;
  }));

  afterEach(() => {
    fixture.destroy();
  });

  it('should be className correct', () => {
    fixture.detectChanges();
    const inlineMenu = debugEle.query(By.css('.ant-menu-inline'));
    expect(inlineMenu).not.toBeNull();
    srv.toggleMenu();
    fixture.detectChanges();
    const verticalMenu = debugEle.query(By.css('.ant-menu-vertical'));
    expect(verticalMenu).not.toBeNull();
  })

  it('menu empty', () => {
    fixture.detectChanges();
    let menuItems = debugEle.queryAll(By.css('.ant-menu-item'));
    expect(menuItems.length).toBe(4);
    context.menus = [];
    fixture.detectChanges();
    menuItems = debugEle.queryAll(By.css('.ant-menu-item'));
    expect(menuItems.length).toBe(0);
  })

  it('menu click', () => {
    fixture.detectChanges();
    const menuItem = debugEle.query(By.css('.ant-menu-item'));
    expect(context.callback).toHaveBeenCalledTimes(0);
    menuItem.nativeElement.click();
    expect(context.callback).toHaveBeenCalledTimes(1);
  })
});


@Component({
  selector: 'app-demo',
  template: `
  <bixi-layout-menu [menus]="menus" (menuClick)="callback()"></bixi-layout-menu>`
})
export class BixiMenuDemoComponent {
  menus: IMenu[] = [
    {
      title: 'Group 1',
      icon: 'user',
      selected: true,
      link: './',
      matchRouterExact: true
    },
    {
      title: 'Group 2',
      icon: 'user',
      children: [
        {
          title: 'Group 2-1',
          icon: 'bars',
          open: false,
          link: '/',
          matchRouterExact: true
        },
        {
          title: 'Group 2-2',
          icon: 'bars',
          open: false,
          link: '/',
          matchRouterExact: true
        },
        {
          title: 'Group 2-3',
          icon: 'bars',
          link: '/',
          open: false,
          matchRouterExact: true
        }
      ]
    }
  ];

  callback = jasmine.createSpy('on menu item click');
}