// Extended player profile

import { Player, TWHelpClient } from './lib/client';

const SCREEN = 'info_player';

const translations: Record<string, Record<string, string>> = {
  pl_PL: {},
};

const t = (s: string) => {
  return translations[window.game_data.locale]?.[s] ?? s;
};

const getPlayerId = () => {
  const str = new URLSearchParams(window.location.search).get('id');
  if (!str) {
    return window.game_data.player.id;
  }
  return parseInt(str);
};

class ExtendedPlayerProfile {
  constructor(private readonly client: TWHelpClient) {}

  async render() {
    const player = await this.client.player(
      window.game_data.market,
      window.game_data.world,
      getPlayerId()
    );
    console.log(player);

    this.renderAdditionalInfo(player);
    this.renderActions(player);
  }

  private renderAdditionalInfo(player: Player) {
    const tbody = document.querySelector('#player_info tbody');
    if (!(tbody instanceof HTMLTableSectionElement)) {
      return;
    }

    tbody.insertAdjacentHTML(
      'beforeend',
      `
    <tr>
        <td>${t('Joined at')}:</td>
        <td>${new Date(player.createdAt).toLocaleString()}</td>
    </tr>
    <tr>
        <td>${t('Last activity at')}:</td>
        <td>${new Date(player.lastActivityAt).toLocaleString()}</td>
    </tr>
    <tr>
        <td>${t('Best rank')}:</td>
        <td>${player.bestRank} (${new Date(
        player.bestRankAt
      ).toLocaleString()})</td>
    </tr>
    <tr>
        <td>${t('Most points')}:</td>
        <td>${player.mostPoints.toLocaleString()} (${new Date(
        player.mostPointsAt
      ).toLocaleString()})</td>
    </tr>
    <tr>
        <td>${t('Most villages')}:</td>
        <td>${player.mostVillages.toLocaleString()} (${new Date(
        player.mostVillagesAt
      ).toLocaleString()})</td>
    </tr>
  `
    );
  }

  private renderActions(player: Player) {
    const tbody = document
      .querySelector('#content_value a[href*="twstats"]')
      ?.closest('tbody');
    if (!(tbody instanceof HTMLTableSectionElement)) {
      return;
    }

    [
      { name: t('Show tribe changes') },
      { name: t('Show history') },
      { name: t('Show ennoblements') },
    ].forEach(({ name }) => {
      const tr = document.createElement('tr');
      const td = document.createElement('td');
      td.colSpan = 2;
      const a = document.createElement('a');
      a.innerText = name;
      a.href = '#';
      a.setAttribute('data-player-id', player.id.toString());
      td.appendChild(a);
      tr.appendChild(td);
      tbody.appendChild(tr);
    });
  }
}

(async () => {
  if (window.game_data.screen !== SCREEN || window.game_data.mode) {
    return;
  }

  await new ExtendedPlayerProfile(
    new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? '')
  ).render();
})();