import {
  AfterViewInit,
  Component,
  ElementRef,
  HostBinding,
} from '@angular/core';

/**
 * Validation Message service holder component
 *
 * @export
 * @class ValidationMessageServiceComponent
 */
@Component({
  selector: 'wm-validation-message-service',
  templateUrl: './validation-message-service.component.html',
  styleUrls: ['./validation-message-service.component.scss'],
})
export class ValidationMessageServiceComponent implements AfterViewInit {
  /**
   * Padding to add to the message on the horizontal coordinate
   *
   * @private
   * @type {number}
   * @memberof ValidationMessageServiceComponent
   */
  private horizontalPadding = 5;

  /**
   * Decorating the component with a class to allow identification in the DOM
   *
   * @memberof ValidationMessageServiceComponent
   */
  @HostBinding('class') class = 'validation-message-service';

  /**
   * Binding to locate the message on top
   *
   * @type {string}
   * @memberof ValidationMessageServiceComponent
   */
  @HostBinding('style.top') top = 'calc(50% - 11em)';

  /**
   * Binding to locate the message on left
   *
   * @type {string}
   * @memberof ValidationMessageServiceComponent
   */
  @HostBinding('style.left') left = 'calc(50% - 11em)';

  /**
   * Owner element to use as anchor
   *
   * @type {DOMRect}
   * @memberof ValidationMessageServiceComponent
   */
  public ownerTargetRect: DOMRect = null;

  /**
   * Message to be shown
   *
   * @type {string}
   * @memberof ValidationMessageServiceComponent
   */
  public message: string = null;

  /**
   * Creates an instance of ValidationMessageServiceComponent.
   * @param {ElementRef} elementRef
   * @memberof ValidationMessageServiceComponent
   */
  constructor(private elementRef: ElementRef) {}

  /**
   * Calculations after rendering
   *
   * @memberof ValidationMessageServiceComponent
   */
  ngAfterViewInit() {
    this.calculatePosition();
  }

  /**
   * Calculates the position to be rendered
   *
   * @private
   * @memberof ValidationMessageServiceComponent
   */
  private calculatePosition(): void {
    if (!!this.ownerTargetRect) {
      let targetLeft: number =
        this.ownerTargetRect.right + this.horizontalPadding;
      let targetTop: number = this.ownerTargetRect.top;

      const thisRect: DOMRect =
        this.elementRef?.nativeElement?.getBoundingClientRect();
      //Message will be hidden on the right and there is enought room on the left then we move it to the left
      if (
        targetLeft + thisRect.width > window.innerWidth &&
        this.ownerTargetRect.left - this.horizontalPadding - thisRect.width > 0
      ) {
        targetLeft =
          this.ownerTargetRect.left - this.horizontalPadding - thisRect.width;
      }

      //Messsage will be hidden at the bottom
      if (targetTop + thisRect.height > window.innerHeight) {
        targetTop = window.innerHeight - thisRect.height - 2;
      }

      this.top = targetTop + 'px';
      this.left = targetLeft + 'px';
    }
  }
}