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() {
    let loadingElement;
    let titleElement;
    try {
      // Wait for the title element to load, so we know the page is fully loaded
      titleElement = await getElement(
        ".title.is-5.player.has-text-centered-mobile",
      );
      const id: string = getPlayerIdFromUrl();

      loadingElement = await this.addLoadingElement(titleElement);
      const player: any = await getPlayer(id);
      loadingElement(); // Remove the loading element

      await this.addStats(player); // Add our custom stats
    } catch (error) {
      loadingElement(); // Remove the loading element

      if (error.message.includes("inactive")) {
        await this.addLoadingElement(
          titleElement,
          "This player is inactive, no extra data available",
        );
      }
      if (error.message.includes("banned")) {
        await this.addLoadingElement(
          titleElement,
          "This player is banned, no extra data available",
        );
      }
    }
  }

  /**
   * Add the custom stats to the player's page
   *
   * @param player the player to add stats for
   */
  private async addStats(player: any): Promise<void> {
    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,
  ): Promise<void> {
    const statsContainer: HTMLElement = await getElement(".stats-container");
    const statElement: HTMLDivElement = document.createElement("div");
    const svelteClass: string = 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); // Add the stat to the stats container
  }

  /**
   * Create a loading element to show the user
   *
   * @param element the element to append the loading element to
   * @param text the text to show in the loading element
   * @returns the loading element
   */
  private async addLoadingElement(
    element: HTMLElement,
    text: string = "Loading SSU data...",
  ): Promise<() => void> {
    const svelteClass: string = getSvelteClass(element.className);

    // The divider element
    const dividerElement: HTMLDivElement = document.createElement("div");
    dividerElement.className = `divider ${svelteClass}`;

    // The loading element
    const loadingElement: HTMLSpanElement = document.createElement("span");
    loadingElement.className = `title-header ${svelteClass} font-size: 1rem;`;
    loadingElement.style.alignSelf = "flex-end";
    loadingElement.innerHTML = `
      <p>${text}</p>`;

    element.appendChild(dividerElement);
    element.appendChild(loadingElement);

    return () => {
      dividerElement.remove();
      loadingElement.remove();
    };
  }
}