import { Component, OnInit, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css'],
  standalone: true,
  imports: [CommonModule]
})
export class NavbarComponent implements OnInit {
  dateTime: string = '';
  isMenuOpen: boolean = false;
  screenWidth: number = window.innerWidth;

  // Venue and Race state
  showVenueModal = false;
  showRaceModal = false;
  venues = ['MYS', 'BLR', 'CHN'];
  races = ['1', '2', '3'];
  selectedVenue = 'MYS';
  selectedRace = '1';

  // Modal state flags
  showWalletModal = false;
  showResultModal = false;
  showMessagesModal = false;
  showLogModal = false;

  // Wallet data
  wallet = {
    withdraw: 0,
    deposit: 0,
    payout: 0,
    cancel: 0,
    ticketing: 0,
    balance: 0
  };

  // Messages
  messages = ['HIII']; // Can be dynamically fetched

  // Logs
  logs = [
    { description: '', venue: '', ticketNumber: '', poolName: '', totalAmount: '' }
  ];

  ngOnInit() {
    this.updateDateTime();
    setInterval(() => this.updateDateTime(), 1000);
  }

  updateDateTime() {
    const now = new Date();
    this.dateTime = now.toLocaleString();
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.screenWidth = event.target.innerWidth;
    if (this.screenWidth > 800) {
      this.isMenuOpen = false;
    }
  }

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

  openVenueModal() {
    this.showVenueModal = true;
  }

  openRaceModal() {
    this.showRaceModal = true;
  }

  openWalletModal() {
    this.showWalletModal = true;
  }

  openResultModal() {
    this.showResultModal = true;
  }

  openMessagesModal() {
    this.showMessagesModal = true;
  }

  openLogModal() {
    this.showLogModal = true;
  }

  closeModals() {
    this.showVenueModal = false;
    this.showRaceModal = false;
    this.showWalletModal = false;
    this.showResultModal = false;
    this.showMessagesModal = false;
    this.showLogModal = false;
  }

  selectVenue(venue: string) {
    this.selectedVenue = venue;
    this.closeModals();
  }

  selectRace(race: string) {
    this.selectedRace = race;
    this.closeModals();
  }
}