import { TooltipDirective } from './tooltip.directive';
import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {Component, DebugElement, NO_ERRORS_SCHEMA} from '@angular/core';
import {By} from '@angular/platform-browser';
import {DocumentService} from '../services/document.service';
import {WindowService} from '../services/window.service';

@Component({
  selector: 'app-test-component',
  template: '<div style="height: 1000px; display: block"></div><div id="testContainer" style="width: 200px; height: 50px;" appTooltip="Hello World"></div>'
})
class TestComponent {}

describe('TooltipDirective', () => {
  let fixture: ComponentFixture<TestComponent>;
  let directive: TooltipDirective;
  let container: DebugElement;
  beforeEach(() => {
    fixture = TestBed.configureTestingModule({
      declarations: [ TestComponent, TooltipDirective ],
      schemas:      [ NO_ERRORS_SCHEMA ],
      providers: [
        DocumentService,
        WindowService
      ]
    })
      .createComponent(TestComponent);
    fixture.detectChanges(); // initial binding

    const tooltipDirectives = fixture.debugElement.queryAll(By.directive(TooltipDirective));
    directive = tooltipDirectives[0].injector.get(TooltipDirective) as TooltipDirective;
    container = fixture.debugElement.query(By.css('#testContainer'));
  });

  it('have a tooltip on mouseover',  fakeAsync( () => {
    container.triggerEventHandler('mouseenter', {});
    fixture.detectChanges();
    tick(100);
    const tooltip =  document.getElementsByClassName('ng-tooltip')[0] as HTMLSpanElement | undefined;
    expect(tooltip?.innerText).toEqual('Hello World');
  }));

  it('should its position above its parent', () => {
    directive.placement = 'top';
    directive.create();
    expect(directive.tooltip).toBeDefined();
    expect(directive.tooltip?.getBoundingClientRect().bottom).toBeGreaterThanOrEqual(container.nativeElement.getBoundingClientRect().top);
  });
  it('should position itself below its parent', () => {
    directive.placement = 'bottom';
    directive.create();
    expect(directive.tooltip).toBeDefined();
    expect(directive.tooltip?.getBoundingClientRect().top).toBeGreaterThanOrEqual(container.nativeElement.getBoundingClientRect().bottom);
  });
  it('should position itself to the left of its parent', () => {
    directive.placement = 'left';
    directive.create();
    expect(directive.tooltip).toBeDefined();
    // @ts-ignore uhm - Im pretty sure we're good here'
    const directiveRightMostPoint = directive.tooltip?.getBoundingClientRect().left + directive.tooltip?.clientWidth;
    expect(directiveRightMostPoint).toBeGreaterThanOrEqual(container.nativeElement.getBoundingClientRect().left);
  });

  it('should position itself to the right of its container', () => {
    directive.placement = 'right';
    directive.create();
    expect(directive.tooltip).toBeDefined();
    expect(directive.tooltip?.getBoundingClientRect().left).toBeLessThanOrEqual(container.nativeElement.getBoundingClientRect().right);
  });

  it('appears on the cursor if placement = "cursor"', () => {
    directive.placement = 'cursor';
    directive.onMouseMove({clientX: 200, clientY: 100} as MouseEvent);
    directive.show();
    expect(directive.tooltip).toBeDefined();
    expect(directive.tooltip?.getBoundingClientRect().left).toBeGreaterThanOrEqual(200);
    expect(directive.tooltip?.getBoundingClientRect().top).toBeGreaterThanOrEqual(100);
  });
});