import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  OnDestroy,
  OnInit,
  Optional,
  Renderer2
} from '@angular/core';
import { WebMapService } from '@mobilize/angularclient';
import {
  AjaxInteractionBaseService,
  ContainerInteractionService,
  ControlComponent,
  WebComponentsService
} from '@mobilize/winforms-components';
import {
  BringTopService,
  dataTransfer,
  EventData
} from '@mobilize/base-components';
/**
 * Angular Component for AjaxModalPopUpExtender Control.
 *
 *
 * @export
 * @class AjaxModalPopUpExtender
 * @extends {ControlComponent}
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'wm-modalpopup-extender',
  templateUrl: './ajax-popupextender.component.html',
  styleUrls: ['./ajax-popupextender.component.scss'],
  inputs: ['model']
})
@dataTransfer(['mdlpppxtndr'])
export class AjaxModalPopUpExtenderComponent
  extends ControlComponent
  implements OnInit, OnDestroy
{
  /**
   * Creates an instance of AjaxCalendarComponent.
   * @param {WebMapService} serviceRef
   * @param {ChangeDetectorRef} changeDetectorRef
   * @param {Renderer2} render2
   * @param {ElementRef} elem
   * @param {WebComponentsService} webComponents
   * @param {BringTopService} bringTopServ1
   * @param {ContainerInteractionService} [containerInteraction]
   * @memberof AjaxCalendarComponent
   */
  constructor(
    private serviceRef: WebMapService,
    private changeDetectorRef: ChangeDetectorRef,
    private render2: Renderer2,
    private elem: ElementRef,
    webComponents: WebComponentsService,
    @Optional() private bringTopServ1: BringTopService,
    @Optional() protected containerInteraction?: ContainerInteractionService,
    @Optional() private ajaxInteractionService?: AjaxInteractionBaseService
  ) {
    super(
      changeDetectorRef,
      render2,
      elem,
      webComponents,
      bringTopServ1,
      containerInteraction
    );
  }

  /**
   * Opened state of the popup dialog
   *
   * @memberof AjaxModalPopUpExtender
   */
  opened = false;

  /**
   * ngOnInit of AjaxModalPopUpExtenderComponent
   *
   * @memberof AjaxModalPopUpExtenderComponent
   */
  ngOnInit(): void {
    super.ngOnInit();
    /* c8 ignore start */
    this.ajaxInteractionService?.ClickEmittedNotification.subscribe(
      (evt: EventData) => {
        if (evt.Id === this.targetControlID) {
          this.open();
        }
        if (evt.Id === this.cancelControlID) {
          this.close();
        }
      }
    ); /* c8 ignore stop */
  }

  /**
   * ngOnDestroy of AjaxModalPopUpExtenderComponent
   *
   * @memberof AjaxModalPopUpExtenderComponent
   */
  ngOnDestroy(): void {
    this.applyStylesToCloseContent();
  }

  /**
   * Gets the BackgroundCSSClass from the model
   *
   * @readonly
   * @type {string}
   * @memberof AjaxModalPopUpExtender
   */
  get backgroundCSSClass(): string | null {
    return this.model?.BackgroundCssClass;
  }

  /**
   * Gets the CancelControlID from the model
   *
   * @readonly
   * @type {string}
   * @memberof AjaxModalPopUpExtender
   */
  get cancelControlID(): string {
    return this.model?.CancelControlID;
  }

  /**
   * Gets the PopUpControlID
   *
   * @readonly
   * @type {string}
   * @memberof AjaxModalPopUpExtender
   */
  get popupControlID(): string {
    return this.model?.PopupControlID;
  }

  /**
   * Gets the TargetControlID from the model
   *
   * @readonly
   * @type {string}
   * @memberof AjaxModalPopUpExtender
   */
  get targetControlID(): string {
    return this.model?.TargetControlID;
  }

  /**
   * Method to open the dialog
   *
   * @memberof AjaxModalPopUpExtender
   */
  open(): void {
    this.opened = true;
    this.detectChanges();
    this.applyStylesToShowContent();
    this.applyBackGroundCSSClass();
  }

  /**
   * Method to close the dialog
   *
   * @memberof AjaxModalPopUpExtender
   */
  close(): void {
    this.opened = false;
    this.detectChanges();
    this.applyStylesToCloseContent();
  }

  /**
   * Applies the background css class
   *
   * @memberof AjaxModalPopUpExtenderComponent
   */
  /* c8 ignore start */
  applyBackGroundCSSClass(): void {
    const backgroundElement = this.elem?.nativeElement?.querySelector(
      'kendo-dialog > div.k-overlay'
    );
    if (backgroundElement && this.backgroundCSSClass) {
      this.render2.addClass(backgroundElement, this.backgroundCSSClass);
    }
  } /* c8 ignore stop */

  /**
   * Applies the styles when the modal is opened
   *
   * @memberof AjaxModalPopUpExtenderComponent
   */
  /* c8 ignore start */
  applyStylesToShowContent(): void {
    const appBackground = document.querySelector('app-root');
    if (appBackground) {
      this.render2.setStyle(appBackground, 'pointer-events', 'none');
    }
    const element = document.querySelector(`#${this.popupControlID}`);
    if (element) {
      this.render2.setStyle(element, 'pointer-events', 'auto');
      this.render2.removeStyle(element, 'display');
      this.render2.setStyle(element, 'display', 'fixed');
      this.render2.addClass(element, 'k-window');
      this.render2.addClass(element, 'k-k-dialog');
      this.render2.setStyle(element, 'top', '50%');
      this.render2.setStyle(element, 'left', '40%');
    }
  } /* c8 ignore stop */

  /**
   * Applies the styles when the modal is closed
   *
   * @memberof AjaxModalPopUpExtenderComponent
   */
  /* c8 ignore start */
  applyStylesToCloseContent(): void {
    const appBackground = document.querySelector('app-root');
    if (appBackground) {
      this.render2.removeStyle(appBackground, 'pointer-events');
    }
    const element = document.querySelector(`#${this.popupControlID}`);
    if (element) {
      this.render2.removeClass(element, 'k-window');
      this.render2.removeClass(element, 'k-k-dialog');
      this.render2.removeStyle(element, 'display');
      this.render2.setStyle(element, 'display', 'none');
      this.render2.removeStyle(element, 'top');
      this.render2.removeStyle(element, 'left');
    }
  } /* c8 ignore stop */
}