import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { UserService } from 'src/app/core/user/user.service';
import { AuthService } from '../../auth.service';
import { CommonModule } from '@angular/common';
import { Player } from 'src/app/model';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  standalone: true,
  imports: [ CommonModule, TranslateModule, MatButtonModule, MatIconModule ]
})
export class DashboardComponent {

  link: string = window.location.host;

  constructor(
    private authService: AuthService
    , private userService: UserService
    , private router: Router
    , public translate: TranslateService) {}



  get role(): string {

    if (!this.authService || !this.authService.isLoggedIn()) { return ''}

    return this.authService.user.role.name;
  }

  get name(): string {
    if (!this.authService || !this.authService.isLoggedIn()) { return ''}

    return this.authService.user.firstName + ' ' + this.authService.user.lastName;
  }

  get players(): any[] {
    return this.userService.players;
  }

  onTeamClick(team: any) {
    this.router.navigate([`dashboard/${team.alias}/details`])
  }

  onLinkClick(event: any) {
    event.stopPropagation();
    return;
  }

  async copyLink(p: Player) {
    const link = `https://${this.link}/teams/${p.team.alias}`
    await navigator.clipboard.writeText(link);
  }
}
