import {
  ComponentRef,
  Directive,
  ElementRef,
  HostListener,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
  SimpleChanges
} from '@angular/core';
import {Overlay, OverlayPositionBuilder, OverlayRef} from '@angular/cdk/overlay';
import {ComponentPortal} from '@angular/cdk/portal';
import {TooltipContentComponent} from './tooltip-content/tooltip-content.component';
import {TooltipModel} from './tooltip-content/tooltip.model';
import {ArOverlayPosition, Placement} from '../../common/model/ar-overlay-position';
import {NavigationStart, Router} from '@angular/router';

@Directive({
  selector: '[upExtTooltip]',
  exportAs: 'upExtTooltip'
})
export class ArTooltipDirective implements OnInit, OnChanges, OnDestroy {

  @Input() upExtTooltip: string | TooltipModel;

  @Input() placement: Placement = 'top';

  private overlayRef: OverlayRef;
  private tooltipRef: ComponentRef<TooltipContentComponent>;

  private _enable = true;
  protected test:string;

  constructor(protected overlayPositionBuilder: OverlayPositionBuilder,
              protected router: Router,
              protected elementRef: ElementRef,
              protected overlay: Overlay) {
  }

  ngOnInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.destroyOverlay();
      }
    });
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (this.tooltipRef && this.upExtTooltip) {
      this.tooltipRef.instance.tooltip = this.upExtTooltip instanceof TooltipModel ? this.upExtTooltip : new TooltipModel(null, this.upExtTooltip);
    }
  }

  ngOnDestroy(): void {
    this.destroyOverlay();
  }

  @HostListener('mouseover', ['$event'])
  show($event) {
    if (this._enable) {
      $event.stopPropagation();
      $event.preventDefault();
      this.open();
    }
  }

  open(model?: TooltipModel) {
    if (!this.overlayRef) {
      this.createOverlay();
    }

    if (model) {
      this.upExtTooltip = model;
    }
    if (this.upExtTooltip) {
      this.overlayRef.detach();
      const tooltipPortal = new ComponentPortal(TooltipContentComponent);
      this.tooltipRef = this.overlayRef.attach(tooltipPortal);
      this.tooltipRef.instance.tooltip = this.upExtTooltip instanceof TooltipModel ? this.upExtTooltip : new TooltipModel(null, this.upExtTooltip);
    }
  }

  close() {
    this.destroyOverlay();
  }

  @HostListener('mouseout')
  hideFromMouseOut() {
    this.detachOverlay();
  }

  @HostListener('mousedown')
  hideFromClick() {
    this._enable = false;
    this.destroyOverlay();
  }

  @HostListener('mouseup')
  _enableTooltip() {
    this._enable = true;
  }

  private createOverlay() {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions(ArOverlayPosition.getConnectedPosition(this.placement));
    this.overlayRef = this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.close()
    });
  }

  private destroyOverlay() {
    if (this.overlayRef) {
      this.overlayRef.dispose();
      this.overlayRef = null;
    }
  }

  private detachOverlay() {
    if (this.overlayRef && this.overlayRef.hasAttached()) {
      this.overlayRef.detach();
    }
  }

}