import Page from "../page";
import {getElement, getSvelteClass} from "../../common/page-utils";
import {getPlayer, getPlayerIdFromUrl} from "../../common/player";

export default class PlayerPage extends Page {
  constructor() {
    super("/u/");
  }

  public async onLoad() {
    try {
      // Wait for the title element to load, so we know the page is fully loaded
      const titleElement = await getElement(".title.is-5.player.has-text-centered-mobile", 250);

      const id = getPlayerIdFromUrl();
      const player = await getPlayer(id);

      await this.addStats(player); // Add our custom stats
    } catch (error) {
      console.error("Failed to load player page", error);
    }
  }

  /**
   * Add the custom stats to the player's page
   *
   * @param player the player to add stats for
   */
  private async addStats(player: any) {
    await this.addStat(
      "+1 PP",
      `${player.rawPerGlobalPerformancePoints.toFixed(2)}pp`,
      "Raw performance points to gain +1 global PP"
    );
  }

  /**
   * Add a stat to the player's stats
   *
   * @param stat the title of the stat
   * @param value the value of the stat
   * @param hover the hover text of the stat
   */
  private async addStat(stat: string, value: string, hover?: string) {
    const statsContainer = await getElement(".stats-container");
    const statElement = document.createElement("div");
    const svelteClass = getSvelteClass(".stats-container");

    statElement.className = `stat-item ${svelteClass}`;
    statElement.innerHTML = `
      <span class="stat-title ${svelteClass}">${stat}</span>
      <span class="stat-spacer ${svelteClass}"></span>
      <span class="stat-content ${hover && "has-hover"} ${svelteClass}" ${hover && `title="${hover}"`}>${value}</span>`;
    statsContainer.appendChild(statElement);
  }
}