import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
import { AsyncPipe, CurrencyPipe, DatePipe, NgFor } from '@angular/common';
import { DepositComponent } from '../deposit/deposit.component';
import { ActivatedRoute, Router } from '@angular/router';
import { ConfirmationComponent } from '@shared/components/confirmation/confirmation.component';
import { NavbarComponent } from '@shared/components/navbar/navbar.component';
import { Game } from 'app/model/Game';
import { Observable } from 'rxjs';
import { TransactionService } from '@service/transaction.service';
import format from 'ajv/dist/vocabularies/format';
import { TransactionHistoryComponent } from '../transaction-history/transaction-history.component';
import { TransactionData } from '../../model/TransactionData';

@Component({
  selector: 'app-homepage',
  standalone: true,
  imports: [
    NavbarComponent,
    CurrencyPipe,
    NgFor,
    DepositComponent,
    ConfirmationComponent,
    AsyncPipe,
    DatePipe,
    TransactionHistoryComponent,
  ],
  templateUrl: './home.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomeComponent implements OnInit {
  isDepositModalOpen = false;
  isDepositSuccessful = false;
  isTransactionModalOpen = false;

  constructor(
    public route: ActivatedRoute,
    public router: Router
  ) {}

  ngOnInit() {
    this.isDepositSuccessful = this.route.snapshot.queryParams['success'] == 'true';

    this.router.navigate([], { queryParams: {} });

    if (this.isDepositSuccessful) {
      this.openDepositConfirmationModal();
    }
  }

  featuredGames: Game[] = [
    {
      id: '1',
      name: 'Poker',
      image: '/poker.webp',
      route: '/game/poker',
    },
    {
      id: '2',
      name: 'Blackjack',
      image: '/blackjack.webp',
      route: '/game/blackjack',
    },
    {
      id: '3',
      name: 'Slots',
      image: '/slots.webp',
      route: '/game/slots',
    },
    {
      id: '4',
      name: 'Plinko',
      image: '/plinko.webp',
      route: '/game/plinko',
    },
    {
      id: '5',
      name: 'Liars Dice',
      image: '/liars-dice.webp',
      route: '/game/liars-dice',
    },
    {
      id: '6',
      name: 'Lootboxen',
      image: '/lootbox.webp',
      route: '/game/lootbox',
    },
  ];

  allGames: Game[] = [...this.featuredGames];

  recentTransactionData: Observable<TransactionData> =
    inject(TransactionService).getUsersTransactions(5);

  openDepositModal() {
    this.isDepositModalOpen = true;
  }

  closeDepositModal() {
    this.isDepositModalOpen = false;
  }

  openDepositConfirmationModal() {
    this.isDepositSuccessful = true;
  }

  openTransactionModal() {
    this.isTransactionModalOpen = true;
  }

  closeDepositConfirmationModal() {
    this.isDepositSuccessful = false;
  }

  closeTransactionModal() {
    this.isTransactionModalOpen = false;
  }

  navigateToGame(route: string) {
    this.router.navigate([route]);
  }

  protected readonly format = format;
}