OriginDex-FrontEnd/src/app/features/plan/planV2.component.ts

import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { FormsModule } from '@angular/forms';
import { PlanGameComponent } from './plan-game/plan-game.component';
import { PlanService } from '../../core/services/plan.service';
import { GamePlan, PokemonFamilyEntry } from '../../core/models/plan.model';
import { PlanPokemonV2Component } from "./plan-pokemon/plan-pokemonV2.component";
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { PlanPokemonDetailsComponent } from "./plan-pokemon-details/plan-pokemon-details.component";
import { AuthService } from '../../core/services/auth.service';

@Component({
  selector: 'app-planV2',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    FormsModule,
    PlanGameComponent,
    PlanPokemonV2Component,
    ScrollingModule,
    PlanPokemonDetailsComponent
],
  template: `
    <div class="plan-container">
      <div class="games-section">
        <div class="games-scroll">
          <div class="games-list">
            <app-plan-game
              *ngFor="let game of gamePlans"
              [game]="game"
              [isSelected]="selectedGame?.game_name === game.game_name"
              (gameSelect)="selectGame($event)"
            ></app-plan-game>
          </div>
        </div>
      </div>

      <div class="content-section">
        <div class="game-stats" *ngIf="selectedGame">
          <h2>{{ selectedGame.game_name }} - Game Stats</h2>
          <!-- Add game stats here -->
        </div>

        <div class="middle-section">
            <div class="pokemon-section" *ngIf="selectedGame">
            <cdk-virtual-scroll-viewport [itemSize]="56" class="pokemon-viewport">
                <div *cdkVirtualFor="let pokemon of selectedGame.pokemon | keyvalue; trackBy: trackByPfic">
                <app-plan-pokemonV2
                    [pokemon_family]="pokemon.value"
                    (statusUpdate)="onPokemonStatusUpdate($event)"
                    [isSelected]="selectedPokemon?.family_pfic === pokemon.key"
                    (familySelected)="selectPokemon($event)"
                ></app-plan-pokemonV2>
                </div>
            </cdk-virtual-scroll-viewport>
            </div>

            <div class="details-section">
            <h2>{{ selectedPokemon?.representative }} - Details</h2>
                <app-plan-pokemon-details
                *ngIf="selectedPokemon"
                [pokemon_family]="selectedPokemon"
                ></app-plan-pokemon-details>
            </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .plan-container {
      display: flex;
      height: calc(100vh - 64px); /* Adjust based on your header height */
      overflow: hidden;
    }

    .games-section {
      width: 11%;
      padding: 20px;
      overflow-y: auto;
      background: #f5f5f5;
      border-right: 1px solid #ddd;
    }

    .games-scroll {
      width: 100%;
    }

    .games-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .content-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px;
      overflow: hidden;
    }

    .middle-section {
        flex: 2;
        display: flex;
        flex-direction: row;
        margin-right: 20px;
    }

    .game-stats {
      padding-bottom: 16px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 16px;
    }

    .pokemon-section {
      flex: 1;
      min-height: 0; /* Important for Firefox */
      display: flex;
      flex-direction: row;
      margin-right: 15px;
    }

    .pokemon-viewport {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      background: #f5f5f5;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .details-section {
      flex: 1;
      padding: 16px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width:15%
    }
  `]
})
export class PlanV2Component implements OnInit {
  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;
  
  gamePlans: GamePlan[] = [];
  selectedGame: GamePlan | null = null;
  selectedPokemon: PokemonFamilyEntry | null = null;

  constructor(
    private planService: PlanService,
    private cdr: ChangeDetectorRef,
    private authService: AuthService
  ) {}

  ngOnInit() {
    this.authService.isAuthenticated$.subscribe((isAuthenticated) => {
      if (isAuthenticated) {
        this.loadPlan();
        console.log("Loading Plan")
      }
    });
  }

  private loadPlan() {
    this.planService.getPlan().subscribe(
      plan => {
        this.gamePlans = plan;
        if (!this.selectedGame && plan.length > 0) {
          this.selectedGame = plan[0];
        }
      }
    );
  }

  selectGame(game: GamePlan) {
    if (this.viewport) {
      this.viewport.scrollToIndex(0); // Reset scroll to top when switching games
    }
    this.selectedGame = null; // Clear the selected game first to avoid stale data
    this.cdr.detectChanges();
    this.selectedGame = game;
    this.cdr.detectChanges();
  }

  onPokemonStatusUpdate(event: { pfic: string, caught: boolean }) {
    this.loadPlan();
  }

  selectPokemon(pokemon: any) {
    this.selectedPokemon = pokemon;
  }

  trackByPfic(index: number, item: any): string {
    return item.key; // Assuming PFIC or another unique identifier is available
  }
}