import { ListResult } from '../lib/client';

const translations: Record<string, Record<string, string>> = {
  pl_PL: {
    Loading: 'Wczytywanie',
    'Previous page': 'Poprzednia strona',
    'Next page': 'Następna strona',
  },
};

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

export type DialogTableColumn<T> = {
  header: string;
  accessor: (row: T) => string;
};

export class DialogTable<T> {
  constructor(
    private readonly id: string,
    private readonly columns: DialogTableColumn<T>[],
    private readonly limit: number,
    private readonly loadData: (
      page: number,
      limit: number
    ) => Promise<ListResult<T>>
  ) {}

  public async render() {
    await this.renderPage(1);
  }

  private async renderPage(page: number) {
    window.Dialog.show(`${this.id}_loading`, `<p>${t('Loading')}...</p>`);

    const { data, total } = await this.loadData(page, this.limit);

    const maxPage = Math.ceil(total / this.limit);
    const pageOpts = [];
    for (let i = 1; i <= (page > maxPage ? page : maxPage); i++) {
      pageOpts.push(
        `<option${
          i === page ? ' disabled selected' : ''
        } value="${i}">${i}</option>`
      );
    }

    const prevPageId = `${this.id}_page_prev`;
    const selectId = `${this.id}_page_select`;
    const nextPageId = `${this.id}_page_next`;

    window.Dialog.show(
      this.id,
      `
      <div style="display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px">
          <button title="${t(
            'Previous page'
          )}" style="margin-right: 5px" class="btn" id="${prevPageId}"${
        page <= 1 ? ' disabled' : ''
      }>&lt;</button>
          <select style="margin-right: 5px" id="${selectId}">
              ${pageOpts.join('')}
          </select>
          <button title="${t('Next page')}" class="btn" id="${nextPageId}"${
        page >= maxPage ? ' disabled' : ''
      }>&gt;</button>
      </div>
      <table class="vis">
        <tbody>
          <tr>
            ${this.columns.map((col) => `<th>${col.header}</th>`).join('')}
          </tr>
          ${data
            .map(
              (r) => `
            <tr>
                ${this.columns
                  .map((col) => `<td>${col.accessor(r)}</td>`)
                  .join('')}
            </tr>
          `
            )
            .join('')}
        </tbody>
      </table>
    `
    );

    document
      .querySelector('#' + prevPageId)
      ?.addEventListener('click', (e: Event) => {
        this.renderPage(page - 1);
      });

    document
      .querySelector('#' + selectId)
      ?.addEventListener('change', (e: Event) => {
        if (!(e.currentTarget instanceof HTMLSelectElement)) {
          return;
        }

        this.renderPage(parseInt(e.currentTarget.value));
      });

    document
      .querySelector('#' + nextPageId)
      ?.addEventListener('click', (e: Event) => {
        this.renderPage(page + 1);
      });
  }
}