import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  inject,
  OnDestroy,
  OnInit,
  Output,
  signal,
} from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthService } from '@service/auth.service';
import { Subscription } from 'rxjs';
import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
import { DepositComponent } from '../../../feature/deposit/deposit.component';
import { TransactionHistoryComponent } from '../../../feature/transaction-history/transaction-history.component';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  standalone: true,
  imports: [RouterModule, AnimatedNumberComponent, DepositComponent, TransactionHistoryComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavbarComponent implements OnInit, OnDestroy {
  isMenuOpen = false;
  isDepositModalOpen = false;
  isTransactionModalOpen = false;
  private authService: AuthService = inject(AuthService);
  isLoggedIn = signal(this.authService.isLoggedIn());

  private authSubscription!: Subscription;
  public balance = signal(0);

  @Output() showLogin = new EventEmitter<void>();
  @Output() showRegister = new EventEmitter<void>();

  ngOnInit() {
    this.authSubscription = this.authService.userSubject.subscribe({
      next: (user) => {
        this.balance.set(user?.balance ?? 0);
        this.isLoggedIn.set(this.authService.isLoggedIn());
      },
    });
  }

  ngOnDestroy() {
    this.authSubscription.unsubscribe();
  }

  logout() {
    this.authService.logout();
  }

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }

  openDepositModal() {
    this.isDepositModalOpen = true;
  }

  closeDepositModal() {
    this.isDepositModalOpen = false;
  }

  openTransactionModal() {
    this.isTransactionModalOpen = true;
  }

  closeTransactionModal() {
    this.isTransactionModalOpen = false;
  }
}