import { Component, HostListener, inject, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './shared/components/navbar/navbar.component';
import { FooterComponent } from './shared/components/footer/footer.component';
import { LoginComponent } from './feature/auth/login/login.component';
import { RegisterComponent } from './feature/auth/register/register.component';
import { RecoverPasswordComponent } from './feature/auth/recover-password/recover-password.component';
import { PlaySoundDirective } from './shared/directives/play-sound.directive';
import { SoundInitializerService } from './shared/services/sound-initializer.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    NavbarComponent,
    FooterComponent,
    LoginComponent,
    RegisterComponent,
    RecoverPasswordComponent,
    PlaySoundDirective,
  ],
  templateUrl: './app.component.html',
  hostDirectives: [PlaySoundDirective],
})
export class AppComponent {
  private soundInitializer = inject(SoundInitializerService);

  showLogin = signal(false);
  showRegister = signal(false);
  showRecoverPassword = signal(false);

  constructor() {
    this.soundInitializer.initialize();
  }

  @HostListener('document:keydown.escape')
  handleEscapeKey() {
    this.hideAuthForms();
  }

  showLoginForm() {
    this.showLogin.set(true);
    this.showRegister.set(false);
    this.showRecoverPassword.set(false);
    document.body.style.overflow = 'hidden';
  }

  showRegisterForm() {
    this.showRegister.set(true);
    this.showLogin.set(false);
    this.showRecoverPassword.set(false);
    document.body.style.overflow = 'hidden';
  }

  showRecoverPasswordForm() {
    this.showRecoverPassword.set(true);
    this.showLogin.set(false);
    this.showRegister.set(false);
    document.body.style.overflow = 'hidden';
  }

  hideAuthForms() {
    this.showLogin.set(false);
    this.showRegister.set(false);
    this.showRecoverPassword.set(false);
    document.body.style.overflow = 'auto';
  }

  stopPropagation(event: MouseEvent) {
    event.stopPropagation();
  }
}