import { Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
import { SidebarComponent } from '../components/sidebar/sidebar.component';
import { NavbarComponent } from '../components/navbar/navbar.component';
import { MiddleSectionComponent } from '../components/middle-section/middle-section.component';
import { TouchPadMenuComponent } from '../components/touch-pad-menu/touch-pad-menu.component';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    CommonModule,
    SidebarComponent,
    NavbarComponent,
    MiddleSectionComponent,
    TouchPadMenuComponent,
  ],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit, OnDestroy {
  isTabletView = false;
  private resizeObserver!: () => void;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.updateView();
    this.resizeObserver = () => {
      this.updateView();
      this.cdr.detectChanges();
    };
    window.addEventListener('resize', this.resizeObserver);
  }

  ngOnDestroy() {
    window.removeEventListener('resize', this.resizeObserver);
  }

  private updateView() {
    this.isTabletView = window.innerWidth <= 800;
  }
}
