import { Component, OnInit, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NavbarComponent } from '../navbar/navbar.component';
import { SidebarComponent } from '../sidebar/sidebar.component';

@Component({
  selector: 'app-layout',
  imports: [
    CommonModule,
    RouterModule,
    NavbarComponent,
    SidebarComponent
  ],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.scss',
  standalone: true,
})
export class LayoutComponent implements OnInit {
  isSidebarVisible: boolean = true;
  window = window; // Exposición de window para su uso en el template
  private readonly MOBILE_BREAKPOINT = 420; // Breakpoint para ocultar sidebar automáticamente

  ngOnInit() {
    // Comprobar el ancho inicial y ajustar el sidebar
    this.checkScreenSize();
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
    this.checkScreenSize();
  }

  private checkScreenSize() {
    // Si la pantalla es menor a 420px, ocultar el sidebar automáticamente
    if (window.innerWidth < this.MOBILE_BREAKPOINT) {
      this.isSidebarVisible = false;
    } else if (window.innerWidth >= 992) {
      // En pantallas grandes, mostrar el sidebar por defecto
      this.isSidebarVisible = true;
    }
    // Entre 420px y 992px mantener el estado actual (toggle manual)
  }

  toggleSidebar() {
    this.isSidebarVisible = !this.isSidebarVisible;
    
    // Aplicar clase al body para todas las resoluciones
    document.body.classList.toggle('sidebar-visible', this.isSidebarVisible);
    
    // Si cerramos el sidebar en resolución pequeña, forzar que el contenido no tenga margen
    if (!this.isSidebarVisible && window.innerWidth <= 992) {
      setTimeout(() => {
        document.querySelector('.main-content-wrapper')?.classList.remove('with-sidebar');
      }, 10);
    }
  }
}
