import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { MatDialog } from '@angular/material/dialog';
import { DepositComponent } from '../deposit/deposit.component';
import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
import { CurrencyPipe, NgFor } from '@angular/common';

interface Game {
  id: string;
  name: string;
  image: string;
}
interface Transaction {
  id: string;
  type: string;
  amount: number;
  date: string;
}

@Component({
  selector: 'app-homepage',
  standalone: true,
  imports: [NavbarComponent, CurrencyPipe, NgFor],
  templateUrl: './home.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomeComponent {
  private keycloakService: KeycloakService = inject(KeycloakService);
  public dialog: MatDialog = inject(MatDialog);

  userAvatar = '/assets/images/default-avatar.png';
  username = this.keycloakService.getUsername();
  vipLevel = 1;
  balance = 1000.0;

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

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

  recentTransactions: Transaction[] = [
    {
      id: '1',
      type: 'Deposit',
      amount: 100.0,
      date: '2024-03-20',
    },
    {
      id: '2',
      type: 'Withdrawal',
      amount: -50.0,
      date: '2024-03-19',
    },
    {
      id: '3',
      type: 'Bonus',
      amount: 25.0,
      date: '2024-03-18',
    },
  ];

  public logout() {
    const baseUrl = window.location.origin;

    this.keycloakService.logout(`${baseUrl}/`);
  }

  public openDialog() {
    this.dialog.open(DepositComponent);
  }
}
