import { DOCUMENT } from '@angular/common';
import {
  AfterContentChecked,
  AfterViewInit,
  Component,
  ElementRef,
  EventEmitter,
  Inject,
  Input,
  OnDestroy,
  Output,
  ViewChild,
} from '@angular/core';
import { GetWindow } from '../../helpers/window.helper';
import { SqLoaderComponent } from '../sq-loader/sq-loader.component';

/**
 * Represents the SqInfinityComponent, a component for infinite scrolling.
 *
 * @implements {AfterViewInit}
 * @implements {AfterContentChecked}
 * @implements {OnDestroy}
 *
 * @example
 * <sq-infinity-scroll [length]="totalItems" [hasMore]="hasMoreData" [loading]="isLoading" (scrolledEmitter)="loadMoreItems()">
 *    <!-- Content Here -->
 * </sq-infinity-scroll>
 */
@Component({
  selector: 'sq-infinity-scroll',
  templateUrl: './sq-infinity-scroll.component.html',
  styleUrls: ['./sq-infinity-scroll.component.scss'],
  standalone: true,
  imports: [SqLoaderComponent],
})
export class SqInfinityComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
  /**
   * Reference to the scroll element.
   */
  @ViewChild('scroll', { static: true }) scrollElement?: ElementRef;

  /**
   * The total number of items in the list.
   */
  @Input() length = 0;

  /**
   * The message to display when reaching the end of the list.
   */
  @Input() endMessage?: string;

  /**
   * Indicates whether there are more items to load.
   */
  @Input() hasMore?: boolean | string = true;

  /**
   * Indicates whether data is currently being loaded.
   */
  @Input() loading?: boolean;

  /**
   * The color of the loader.
   */
  @Input() loaderColor?: string;

  /**
   * The ID of the element to scroll (if using a custom scrolling element).
   */
  @Input() elementToScrollId?: string;

  /**
   * Event emitter for when the user scrolls to trigger loading more items.
   */
  @Output() scrolledEmitter: EventEmitter<void> = new EventEmitter();

  /**
   * Element that have the scroll listener
   */
  elementToScroll?: HTMLElement | null | (Window & typeof globalThis);

  /**
   * Reference to the Document object for interacting with the DOM.
   */
  document: Document;

  /**
   * Threshold for scrolling.
   */
  tresholdScroll = 25;

  /**
   * Creates an instance of SqInfinityComponent.
   * @constructor
   * @param {Document} documentImported Reference to the Document object for interacting with the DOM.
   * @param {GetWindow} getWindow Reference to the GetWindow service for safely accessing the window object.
   */
  constructor(
    @Inject(DOCUMENT) public documentImported: Document,
    public getWindow: GetWindow
  ) {
    this.document = this.documentImported || document;
  }

  /**
   * Performs actions after the view has been initialized.
   */
  ngAfterViewInit(): void {
    const { elementToScrollId } = this;

    if (elementToScrollId) {
      this.elementToScroll = this.document.getElementById(elementToScrollId);
    }

    if (!elementToScrollId || !this.elementToScroll) {
      this.elementToScroll = this.getWindow.window();
    }
    this.elementToScroll?.addEventListener('scroll', this.onScroll, false);
  }

  /**
   * Performs actions after content has been checked.
   */
  ngAfterContentChecked(): void {
    if (
      this.elementToScrollId &&
      this.elementToScroll &&
      this.elementToScroll instanceof HTMLElement &&
      typeof this.elementToScroll.getAttribute === 'undefined'
    ) {
      const element = this.document.getElementById(this.elementToScrollId);
      if (element) {
        this.elementToScroll.removeEventListener('scroll', this.onScroll, false);
        element.addEventListener('scroll', this.onScroll, false);
        this.elementToScroll = element;
      }
    }
  }

  /**
   * Performs actions before the component is destroyed.
   */
  ngOnDestroy(): void {
    this.elementToScroll?.removeEventListener('scroll', this.onScroll, false);
  }

  /**
   * Handles the scroll event and triggers loading more items if applicable.
   */
  onScroll = () => {
    if (!this.loading && this.length > 0 && this.hasMore) {
      if (this.elementToScrollId && this.elementToScroll instanceof HTMLElement) {
        const allScroll = this.elementToScroll?.scrollTop + this.elementToScroll?.clientHeight;
        if (allScroll + this.tresholdScroll >= this.elementToScroll?.scrollHeight) {
          this.elementToScroll?.removeEventListener('scroll', this.onScroll, false);
          this.scrolledEmitter.emit();
          this.elementToScroll?.addEventListener('scroll', this.onScroll, false);
        }
      } else if (this.elementToScroll instanceof Window) {
        const elementHeight = this.elementToScroll?.innerHeight;
        const elementY = this.elementToScroll?.scrollY;
        if (
          elementHeight + elementY + this.tresholdScroll >=
          this.scrollElement?.nativeElement.offsetHeight + this.scrollElement?.nativeElement.offsetTop
        ) {
          this.elementToScroll?.removeEventListener('scroll', this.onScroll, false);
          this.scrolledEmitter.emit();
          this.elementToScroll?.addEventListener('scroll', this.onScroll, false);
        }
      }
    }
  };
}