import { Component } from '@angular/core';
/* tslint:disable:max-classes-per-file max-file-line-count component-class-suffix */
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { fireEvent } from '../../scripts/helpers';
import { TooltipModule } from '../tooltip/tooltip.module';

@Component({
  selector: 'test-tooltip',
  template: ''
})
class TestTooltipComponent {
  delay = 0;
}

const overTemplate = `
    <div class="form-group">
      <label>Or use custom triggers, like focus: </label>
      <input type="text" name="clickMe" id="test-tooltip1" value="Click me!"
      [tooltipPopupDelay] = "delay" tooltip="See? Now click away..."  triggers="focus"  class="form-control" />
    </div>

    <div class="form-group" ngClass="{'has-error' : !inputModel}">
      <label>Disable tooltips conditionally:</label>
      <input type="text" name="inputModel"  class="form-control"
             placeholder="Hover over this for a tooltip until this is filled"
             tooltip="Enter something in this input field to disable this tooltip"
             placement="top" />
    </div>

    <p>
    Programatically show/hide tooltip
     <a href="#" [tooltip]="'Foo'"
                 #tooltip="bs-tooltip">Check me out!</a>
     <button class="btn btn-primary" id="showTooltipBtn" (click)="tooltip.show()">Show tooltip</button>
     <button class="btn btn-danger" id="hideTooltipBtn" (click)="tooltip.hide()">Hide tooltip</button>
   </p>`;

xdescribe('Directives: Tooltips', () => {
  let fixture: ComponentFixture<TestTooltipComponent>;
  let context: any;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestTooltipComponent],
      imports: [TooltipModule.forRoot(), FormsModule]
    });
    TestBed.overrideComponent(TestTooltipComponent, {
      set: {template: overTemplate}
    });
    fixture = TestBed.createComponent(TestTooltipComponent);
    context = fixture.componentInstance;
    fixture.detectChanges();
  });

  afterEach(() => {
    fixture = undefined;
    context = undefined;
  });

  it('tooltip should not be displayed until user does not any actions', () => {
    const element: HTMLElement = fixture.debugElement.nativeElement;
    expect(element.querySelector('.tooltip-inner')).toBeNull();
  });

  it(
    'tooltip should be displayed by focus event after 0 ms by default',
    fakeAsync(() => {
      const element: HTMLElement = fixture.debugElement.nativeElement;
      const tooltipElement: any = element.querySelector('#test-tooltip1');
      tooltipElement.focus();
      fixture.detectChanges();
      tick(0);
      fixture.detectChanges();
      expect(element.querySelector('.tooltip-inner')).not.toBeNull();
    })
  );

  it(
    'tooltip should be displayed after specified delay',
    fakeAsync(() => {
      const element: HTMLElement = fixture.debugElement.nativeElement;
      const tooltipElement: any = element.querySelector('#test-tooltip1');
      context._delay = 1000;
      fixture.detectChanges();
      tooltipElement.focus();
      fixture.detectChanges();
      tick(1100);
      fixture.detectChanges();
      expect(element.querySelector('.tooltip-inner')).not.toBeNull();
    })
  );

  xit(
    'tooltip should be displayed by mouseenter event',
    fakeAsync(() => {
      const element: HTMLElement = fixture.debugElement.nativeElement;
      const tooltipElement: any = element.querySelector('#test-tooltip1');
      fireEvent(tooltipElement, 'mouseenter');
      fixture.detectChanges();
      tick(context.delay);
      fixture.detectChanges();
      expect(element.querySelector('.tooltip-inner')).not.toBeNull();
    })
  );

  it(
    'tooltip should be displayed after user clicks on specified DOM element which refers to showing the tooltip',
    fakeAsync(() => {
      const element: Element = fixture.debugElement.nativeElement;
      const showTooltipBtn: any = element.querySelector('#showTooltipBtn');
      showTooltipBtn.click();
      fixture.detectChanges();
      tick(context.delay);
      fixture.detectChanges();
      expect(element.querySelector('.tooltip-inner')).not.toBeNull();
    })
  );

  it(
    'tooltip should be hidden after user clicks on specified DOM element which refers to hiding the tooltip',
    fakeAsync(() => {
      const element: Element = fixture.debugElement.nativeElement;
      const showTooltipBtn: any = element.querySelector('#hideTooltipBtn');
      showTooltipBtn.click();
      fixture.detectChanges();
      tick(context.delay);
      fixture.detectChanges();
      expect(element.querySelector('.tooltip-inner')).toBeNull();
    })
  );
});