import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@digital-realty/ix-icon-button/ix-icon-button.js';
import '@digital-realty/ix-select/ix-select.js';
import { IxGridViewStyles } from '../grid-view-styles.js';
import { PaginationStyles } from './pagination-styles.js';
import { copy } from '../ix-grid-copy.js';

@customElement('ix-pagination')
export class IxPagination extends LitElement {
  static readonly styles = [IxGridViewStyles, PaginationStyles];

  @property({ type: Number }) recordCount = 0;

  @property({ type: Number }) page = 1;

  @property({ type: Number }) pageSize = 10;

  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];

  @property({ type: Boolean, attribute: 'simple' }) isSimple = false;

  private changePage(offset: number) {
    this.page += offset;
    this.updatePagination();
  }

  private handlePageSizeSelection(e: Event) {
    const el = e.target as HTMLInputElement;
    const newPageSize = Number(el.value);

    const currentFirstRecord = (this.page - 1) * this.pageSize + 1;
    const newPageNum = Math.ceil(currentFirstRecord / newPageSize);

    this.updatePagination(newPageNum, newPageSize);
  }

  updatePagination(page = this.page, pageSize = this.pageSize) {
    this.dispatchEvent(
      new CustomEvent('updatePagination', {
        detail: {
          page,
          pageSize,
        },
        bubbles: true,
        composed: true,
      })
    );
  }

  render() {
    const back = this.page > 1;
    const next = this.recordCount > this.page * this.pageSize;
    return html` <div class="pagination ${this.isSimple ? 'simple' : ''}">
      <div ?hidden=${this.isSimple}>
        <p class="rows-per-page" data-testid="ix-pagination-rows-per-page">
          ${copy.rowsPerPage}:
        </p>
        <ix-select
          wide-menu
          menu-positioning="fixed"
          class="pagination__select-input"
          @request-selection=${this.handlePageSizeSelection}
          selected-index=${this.pageSizes.indexOf(this.pageSize)}
          filled
        >
          ${this.pageSizes.map(
            option => html`
              <ix-select-option
                class="select-option"
                value=${option}
                ?selected=${option === this.pageSize}
              >
                <div slot="headline">${option}</div>
              </ix-select-option>
            `
          )}
        </ix-select>
      </div>
      <div>
        <p data-testid="ix-pagination-page-of-page">
          ${this.recordCount > 0 ? (this.page - 1) * this.pageSize + 1 : 0} -
          ${this.page * this.pageSize > this.recordCount
            ? html`${this.recordCount}`
            : html`${this.page * this.pageSize}`}
          of ${this.recordCount > 0 ? this.recordCount : 0}
        </p>
        <div class="pagination-nav">
          <ix-icon-button
            ?disabled=${!back}
            @click=${() => back && this.changePage(-1)}
            icon="chevron_left"
            data-testid="ix-pagination-prev"
          >
          </ix-icon-button>
          <ix-icon-button
            ?disabled=${!next}
            @click=${() => next && this.changePage(+1)}
            icon="chevron_right"
            data-testid="ix-pagination-next"
          >
          </ix-icon-button>
        </div>
      </div>
    </div>`;
  }
}