import {
  Directive,
  Input,
  OnChanges,
  OnDestroy,
  SimpleChanges,
  TemplateRef,
} from '@angular/core';
import { PopupRect, PopupService } from '../services/popup.service';

/**
 * Popup Directive class
 *
 * @export
 * @class PopupDirective
 * @implements {OnDestroy}
 * @implements {OnChanges}
 */
@Directive({
  selector: '[wmPopup]',
})
export class PopupDirective implements OnDestroy, OnChanges {
  /**
   * Visible
   *
   * @memberof PopupDirective
   */
  @Input('wmPopup')
  visible = false;

  /**
   * Top value
   *
   * @type {(number | undefined)}
   * @memberof PopupDirective
   */
  @Input('wmPopupTop')
  top: number | undefined;

  /**
   * Left value
   *
   * @type {(number | undefined)}
   * @memberof PopupDirective
   */
  @Input('wmPopupLeft')
  left: number | undefined;

  /**
   * Bottom value
   *
   * @type {(number | undefined)}
   * @memberof PopupDirective
   */
  @Input('wmPopupBottom')
  bottom: number | undefined;

  /**
   * Right value
   *
   * @type {(number | undefined)}
   * @memberof PopupDirective
   */
  @Input('wmPopupRight')
  right: number | undefined;

  /**
   * Height value
   *
   * @type {(number | undefined)}
   * @memberof PopupDirective
   */
  @Input('wmPopupHeight')
  height: number | undefined;

  /**
   * Width value
   *
   * @type {(number | undefined)}
   * @memberof PopupDirective
   */
  @Input('wmPopupWidth')
  width: number | undefined;

  /**
   * Overlay value
   *
   * @type {(boolean | undefined)}
   * @memberof PopupDirective
   */
  @Input('wmPopupOverlay')
  overlay: boolean | undefined;

  /**
   * Rect data
   *
   * @memberof PopupDirective
   */
  readonly #rect: PopupRect = {};

  /**
   * Creates an instance of PopupDirective.
   *
   * @param {PopupService} popupService
   * @param {TemplateRef<any>} tr
   * @memberof PopupDirective
   */
  constructor(
    private readonly popupService: PopupService,
    private tr: TemplateRef<any>
  ) {}

  /**
   * Angular lifecycle
   * Set Position for the Popup Element
   *
   * @param {SimpleChanges} changes
   * @memberof PopupDirective
   */
  ngOnChanges(changes: SimpleChanges): void {
    this.#rect.top = this.top;
    this.#rect.left = this.left;
    this.#rect.bottom = this.bottom;
    this.#rect.right = this.right;
    this.#rect.height = this.height;
    this.#rect.width = this.width;

    if (
      changes['visible']?.previousValue === true &&
      changes['visible']?.currentValue === false
    ) {
      this.popupService.remove(this.tr);
    }

    if (this.visible) {
      this.popupService.set(this.tr, this.#rect, this.overlay);
    }
  }

  /**
   * Angular lifecycle
   * Remove not used templates
   *
   * @memberof PopupDirective
   */
  ngOnDestroy(): void {
    if (this.visible) {
      this.popupService.remove(this.tr);
    }
  }
}