import { DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import {
  Component,
  ContentChild,
  ElementRef,
  EventEmitter,
  Inject,
  Input,
  OnChanges,
  OnDestroy,
  Output,
  SimpleChanges,
  TemplateRef,
  ViewChild,
} from '@angular/core';
import { sleep } from '../../helpers/sleep.helper';
import { NavigationStart, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { GetWindow } from '../../helpers/window.helper';
import { SqClickOutsideDirective } from '../../directives/sq-click-outside/sq-click-outside.directive';

/**
 * Represents an overlay component, an abstraction with differente style but still a modal.
 *
 * @deprecated Use `SqOverlayBaseComponent` or `SqModalService.openOverlay()` instead.
 * This component will be removed in a future version.
 *
 * @example
 * <sq-overlay [open]="isOverlayOpen" overlayDirection="right" (overlayClose)="onOverlayClose()">
 *   <ng-template #headerTemplate>
 *     <h2>Overlay Header</h2>
 *   </ng-template>
 *   <ng-template #footerTemplate>
 *     Footer
 *   </ng-template>
 *   <div>
 *     <!-- Your content here -->
 *   </div>
 * </sq-overlay>
 * <button (click)='isOverlayOpen = true'>Open Modal</button>
 *
 * @implements {OnChanges}
 * @implements {OnDestroy}
 */
@Component({
  selector: 'sq-overlay',
  templateUrl: './sq-overlay.component.html',
  styleUrls: ['./sq-overlay.component.scss'],
  standalone: true,
  imports: [NgClass, NgStyle, NgTemplateOutlet, SqClickOutsideDirective],
})
export class SqOverlayComponent implements OnChanges, OnDestroy {
  /**
   * A unique identifier for the overlay.
   */
  @Input() id = `overlay-random-id-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`;

  /**
   * Indicates whether the overlay is open or closed.
   *
   */
  @Input() open?: boolean;

  /**
   * The direction in which the overlay slides in when opened.
   *
   */
  @Input() overlayDirection: 'right' | 'left' = 'right';

  /**
   * The width of the overlay.
   *
   */
  @Input() width = '475px';

  /**
   * Determines whether the overlay has a border.
   *
   */
  @Input() borderless = false;

  /**
   * The background color of the overlay header.
   *
   */
  @Input() headerColor = 'var(--background_secondary)';

  /**
   * The text color of items within the overlay header.
   *
   */
  @Input() headerItemsColor = '';

  /**
   * The background color of the overlay footer.
   *
   */
  @Input() footerColor = 'var(--background_secondary)';

  /**
   * The background color of the overlay body.
   *
   */
  @Input() bodyColor = 'var(--background_secondary)';

  /**
   * Determines whether the close button is shown.
   *
   */
  @Input() showClose = true;

  /**
   * Specifies the behavior of the backdrop when clicked.
   *
   */
  @Input() backdrop = 'static';

  /**
   * The padding applied to the overlay body.
   *
   */
  @Input() bodyPadding = '2rem';

  /**
   * Emits an event when the overlay is closed.
   *
   */
  @Output() overlayClose: EventEmitter<void> = new EventEmitter();

  /**
   * Emits an event when the left arrow key is pressed.
   *
   */
  @Output() leftPress: EventEmitter<void> = new EventEmitter();

  /**
   * Emits an event when the right arrow key is pressed.
   *
   */
  @Output() rightPress: EventEmitter<void> = new EventEmitter();

  /**
   * A reference to the overlay element.
   *
   */
  @ViewChild('overlay') overlay: ElementRef | null = null;

  /**
   * A reference to the header template.
   *
   */
  @ContentChild('headerTemplate') headerTemplate?: TemplateRef<ElementRef> | null = null;

  /**
   * A reference to the footer template.
   *
   */
  @ContentChild('footerTemplate') footerTemplate?: TemplateRef<ElementRef> | null = null;

  /**
   * A collection of modal elements.
   *
   */
  modals: HTMLCollectionOf<Element> | undefined;

  /**
   * The number of modal elements.
   *
   */
  modalNumber = 0;

  /**
   * Indicates whether the overlay has a header.
   *
   */
  hasHeader = false;

  /**
   * Indicates whether the overlay has a footer.
   *
   */
  hasFooter = false;

  /**
   * A reference to the Document object.
   *
   */
  document: Document;

  /**
   * A unique style identifier.
   *
   */
  styleId = `overlay-style-random-id-${new Date().getTime()}-${Math.random().toString(36).substring(7)}`;

  /**
   * Indicates whether the overlay has finished opening.
   *
   */
  finishOpening = false;

  /**
   * Indicates the origin path from overlay.
   *
   */
  localized: URL;

  /**
   * A subscription to the router change url.
   */
  routerObservable!: Subscription;

  /**
   * Indicates the scroll position of the window.
   */
  scrollY = this.getWindow?.window()?.scrollY;

  /**
   * Constructs an instance of SqOverlayComponent.
   * @constructor
   * @param {Document} documentImported - The injected Document object for DOM manipulation.
   * @param {Router} router - The Router service for programmatic navigation.
   * @param {GetWindow} getWindow - The GetWindow service for safely accessing the window object.
   */
  constructor(
    @Inject(DOCUMENT) public documentImported: Document,
    public router: Router,
    public getWindow: GetWindow
  ) {
    this.onKeydown = this.onKeydown.bind(this);
    this.document = documentImported || document;
    this.localized = new URL(this.getWindow.href());
  }

  /**
   * Lifecycle hook that detects changes to the 'open' input property and handles modal behavior accordingly.
   *
   * @param changes - The changes detected in the component's input properties.
   */
  async ngOnChanges(changes: SimpleChanges) {
    if (changes.hasOwnProperty('width') && this.open) {
      this.doCssWidth();
    }
    if (changes.hasOwnProperty('open')) {
      const overlay = this.overlay;
      if (overlay) {
        const body = this.document.getElementsByTagName('body')[0];
        const backdrop = this.document.getElementById('modal-backdrop') || this.document.createElement('div');
        if (this.open) {
          this.scrollY = this.getWindow?.window()?.scrollY;
          body.appendChild(overlay.nativeElement);
          this.observeRouter();
          this.doCssWidth();
          this.hasFooter = !!this.footerTemplate;
          this.hasHeader = !!this.headerTemplate;
          body.classList.add('block');
          overlay.nativeElement.style.display = 'flex';
          this.getWindow?.window()?.addEventListener('keydown', this.onKeydown);
          this.modals = this.document.getElementsByClassName('modal open');
          await sleep(10);
          this.modalNumber = this.modals?.length || 0;
          if (this.modalNumber <= 1) {
            backdrop.setAttribute('id', 'modal-backdrop');
            backdrop.setAttribute('class', 'modal-backdrop show');
            body.appendChild(backdrop);
          } else if (this.modalNumber > 1) {
            overlay.nativeElement.style.zIndex = 1060 + this.modalNumber + 1;
            backdrop.setAttribute('style', `z-index: ${1060 + this.modalNumber};`);
          }
          this.finishOpening = true;
        } else {
          this.removeOverlayFromBody();
        }
      }
    }
  }

  /**
   * Performs actions before the component is destroyed.
   */
  ngOnDestroy(): void {
    this.routerObservable?.unsubscribe();
  }

  /**
   * Function that init the routerObservable.
   */
  observeRouter() {
    this.routerObservable = this.router.events.subscribe(async event => {
      if (event instanceof NavigationStart) {
        const destinationRoute = new URL(event.url, this.localized.origin);
        if (this.localized.origin + this.localized.pathname !== destinationRoute.origin + destinationRoute.pathname) {
          this.removeOverlayFromBody();
          await sleep(1000);
        }
      }
    });
  }

  /**
   * Removes the overlay element from document body.
   */
  removeOverlayFromBody() {
    const body = this.document.getElementsByTagName('body')[0];
    if (this.modalNumber <= 1) {
      body?.classList?.remove('block');
      if (window.scrollY !== this.scrollY) {
        if (this.scrollY) this.getWindow?.window()?.scrollTo(0, this.scrollY);
      }
    }
    const backdrop = this.document.getElementById('modal-backdrop');
    const overlay: any = this.document.getElementById(this.id);
    this.overlayClose.emit();
    this.finishOpening = false;
    this.undoCssWidth();
    overlay?.parentNode?.removeChild(overlay);
    if (this.modalNumber === 2) {
      backdrop?.removeAttribute('style');
    } else if (this.modalNumber <= 1) {
      backdrop?.parentNode?.removeChild(backdrop);
    }
    window.removeEventListener('keydown', this.onKeydown);
  }

  /**
   * Applies CSS styles to set the width of the overlay.
   */
  doCssWidth() {
    const css = `
      .overlay.open .modal-dialog.opened {
        width: ${this.width};
      }
    `;
    const head = this.document.getElementsByTagName('head')[0];
    let style = this.document.getElementById(this.styleId);
    if (!style) {
      style = this.document.createElement('style');
      style.setAttribute('id', this.styleId);
      style.appendChild(this.document.createTextNode(css));
      head.appendChild(style);
    } else {
      style.innerHTML = '';
      style.appendChild(this.document.createTextNode(css));
    }
  }

  /**
   * Removes the CSS styles that set the width of the overlay.
   */
  undoCssWidth() {
    const style = this.document.getElementById(this.styleId);
    if (style?.parentNode) {
      style.parentNode.removeChild(style);
    }
  }

  /**
   * Handles keyboard events for the modal component.
   *
   * @param event - The keyboard event object.
   */
  onKeydown(event: KeyboardEvent) {
    if (this.open) {
      this.modals = this.document.getElementsByClassName('modal open');
      if (this.modals?.length && this.modals[this.modals.length - 1]?.id === this.id) {
        this.events(event.key);
      }
    }
  }

  /**
   * Handles specific keyboard events.
   *
   * @param key - The key code of the pressed key.
   */
  events(key: string) {
    switch (key) {
      case 'Escape':
        this.overlayClose.emit();
        break;
      case 'ArrowLeft':
        this.leftPress.emit();
        break;
      case 'ArrowRight':
        this.rightPress.emit();
        break;
    }
  }

  /**
   * Closes the overlay logic.
   */
  toCloseOverlay() {
    if (this.overlay && this.open) {
      const body = this.document.getElementsByTagName('body')[0];
      const backdrop = this.document.getElementById('modal-backdrop') || this.document.createElement('div');
      this.overlayClose.emit();
      this.overlay.nativeElement.style.display = 'none';
      if (backdrop.parentNode && this.modalNumber <= 1) {
        backdrop.parentNode.removeChild(backdrop);
        body.classList.remove('block');
      }
      window.removeEventListener('keydown', this.onKeydown);
    }
  }
}