import {AfterViewInit, Component, ElementRef, Input, OnDestroy, Renderer2} from '@angular/core';

@Component({
  selector: 'app-full-size',
  standalone: true,
  imports: [],
  templateUrl: './full-size.component.html',
  styleUrl: './full-size.component.scss'
})
export class FullSizeComponent implements AfterViewInit, OnDestroy {
  private resizeObserver: ResizeObserver | null = null;
  private boundHandleResize: any;

  // Optional extra offset in pixels to subtract from available height
  @Input() extraOffset: number = 0;

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {
  }

  ngAfterViewInit(): void {
    this.setupResizeObserver();
    this.updateContainerHeight();

    this.boundHandleResize = this.handleResize.bind(this);
    window.addEventListener('resize', this.boundHandleResize);

    // Ensure first paint sets correct height
    setTimeout(() => this.updateContainerHeight(), 0);
  }

  ngOnDestroy(): void {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }

    if (this.boundHandleResize) {
      window.removeEventListener('resize', this.boundHandleResize);
    }
  }

  private handleResize() {
    this.updateContainerHeight();
  }

  private setupResizeObserver() {
    this.resizeObserver = new ResizeObserver(() => {
      this.updateContainerHeight();
    });

    const headerElement = document.querySelector('app-header');
    if (headerElement) {
      this.resizeObserver.observe(headerElement);
    }

    const footerElement = document.querySelector('footer');
    if (footerElement) {
      this.resizeObserver.observe(footerElement);
    }
  }

  private updateContainerHeight() {
    const headerElement = document.querySelector('app-header');
    const footerElement = document.querySelector('footer');

    const container: HTMLElement | null = this.elementRef.nativeElement.querySelector('.full-size-container');

    if (container) {
      const headerHeight = headerElement ? headerElement.getBoundingClientRect().height : 0;
      const footerHeight = footerElement ? footerElement.getBoundingClientRect().height : 0;

      const totalOffset = headerHeight + footerHeight + (this.extraOffset || 0);
      const calculatedHeight = `calc(100vh - ${totalOffset}px)`;
      this.renderer.setStyle(container, 'height', calculatedHeight);
    }
  }
}