import {
  ChangeDetectionStrategy,
  Component,
  AfterContentInit,
  ChangeDetectorRef,
  HostBinding,
  ElementRef,
} from '@angular/core';

/**
 * Angular Component for the OutlookBarPopup.
 *
 * @export
 * @class OutlookBarPopupComponent
 * @implements {AfterContentInit}
 */
@Component({
  selector: 'wm-outlook-bar-popup',
  templateUrl: './outlook-bar-popup.component.html',
  styleUrls: ['./outlook-bar-popup.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OutlookBarPopupComponent implements AfterContentInit {
  /**
   * Binding to position the popup
   *
   * @memberof OutlookBarPopupComponent
   */
  @HostBinding('style.top')
  top: string;

  /**
   * Binding to position the popup
   *
   * @memberof OutlookBarPopupComponent
   */
  @HostBinding('style.left')
  left: string;

  /**
   * Binding to set the height of the container
   *
   * @memberof OutlookBarPopupComponent
   */
  @HostBinding('style.height')
  height: string;

  /**
   * Oulookbar element reference
   *
   * @type {Element}
   * @memberof OutlookBarPopupComponent
   */
  outlookBarRef: Element;

  /**
   * Dynamic template
   *
   * @type {*}
   * @memberof OutlookBarPopupComponent
   */
  dynamicTemplate: any;

  /**
   * Dynamic template context
   *
   * @type {*}
   * @memberof OutlookBarPopupComponent
   */
  templateContext: any;

  /**
   * OulookBar item template
   *
   * @type {*}
   * @memberof OutlookBarPopupComponent
   */
  outlookBarItem: any;

  /**
   * Creates a new instance of OutlookBarPopupComponent component.
   *
   * @param {ChangeDetectorRef} cd
   * @param {ElementRef} element
   * @memberof OutlookBarPopupComponent
   */
  /* istanbul ignore next */
  constructor(private cd: ChangeDetectorRef, public element: ElementRef) {}

  /**
   * Angular lifecycle.
   *
   * @type {void}
   * @memberof OutlookBarPopupComponent
   */
  ngAfterContentInit(): void {
    this.calcPositioning();
  }

  /**
   * Based on the Outlookbar naviagtion pane positiong, sets left, top and height to position the container.
   *
   * @type {void}
   * @memberof OutlookBarPopupComponent
   */
  calcPositioning(): void {
    if (!this.outlookBarRef) return;
    const outlookBarRect = this.outlookBarRef.getBoundingClientRect();
    this.top = outlookBarRect.top + 'px';
    this.left = outlookBarRect.right + 3 + 'px';
    this.height = outlookBarRect.height + 'px';
  }

  /**
   * Trigger a new detectChange.
   *
   * @type {void}
   * @memberof OutlookBarPopupComponent
   */
  detectChanges(): void {
    this.cd.detectChanges();
  }
}