import * as React from 'react';

import { getPaginationRange } from 'mmviz';

import { MmuiCommonComponent, MmuiProps, MmuiState } from '../common';

export interface MmuiPaginationRangeProps extends MmuiProps {
  rangeSize?: number;
  pageNumber?: number;
  totalPages: number;
}

export interface MmuiPaginationRangeState extends MmuiState {
  rangeSize: number;
  pageNumber: number;
  totalPages: number;
}

export class MmuiPaginationRangeComponent<
  P extends MmuiPaginationRangeProps,
  S extends MmuiPaginationRangeState
> extends MmuiCommonComponent<P, S> {
  /**
   * Constructor
   * @param props
   *  props.summaryRenderMode: Options "text" or "token".
   *      Specifying "text" the summary of selected choices is display as text.
   *      Specifying "token" the summary of selected choices is display as tokens.
   */
  constructor(props) {
    super(props);
  }

  getInitialComponentState(): any {
    const state: any = {
      rangeSize: 7,
      pageNumber: 1,
    };

    if (this.props.rangeSize !== undefined) {
      state.rangeSize = this.props.rangeSize;
    }

    if (this.props.pageNumber !== undefined) {
      state.pageNumber = this.props.pageNumber;
    }

    state.totalPages = this.props.totalPages;
    return state;
  }

  pageClick(e: React.SyntheticEvent) {
    e.preventDefault();

    const pageLinkElmt = e.target as HTMLElement,
      pageNumber = parseInt(pageLinkElmt.dataset.page);
    this.mergeComponentState({ pageNumber: pageNumber, updatedAt: new Date() });
  }

  onPageClick = (e: React.SyntheticEvent) => {
    this.pageClick(e);
  };

  /**
   * Render the Component
   */
  render() {
    let state = this.getComponentState(),
      firstElmt,
      prevElmt,
      nextElmt,
      lastElmt,
      pageRangeElements,
      rangeArray = [];
    if (state.pageNumber && state.totalPages) {
      rangeArray = getPaginationRange(
        state.totalPages,
        state.rangeSize,
        state.pageNumber
      );

      pageRangeElements = rangeArray.map((r) => {
        let elmt,
          key = `page-link-${r}`;
        if (r === state.pageNumber) {
          elmt = (
            <li key={key} className="page-item active">
              <a
                className="page-link"
                href="?page={r}"
                data-page={r}
                onClick={this.onPageClick}
              >
                {r}
              </a>
            </li>
          );
        } else {
          elmt = (
            <li key={key} className="page-item">
              <a
                className="page-link"
                href="?page={r}"
                data-page={r}
                onClick={this.onPageClick}
              >
                {r}
              </a>
            </li>
          );
        }

        return elmt;
      });

      // show first
      if (rangeArray[0] > 1) {
        firstElmt = (
          <li className="page-item">
            <a
              className="page-link pagination-first"
              href="?page=1"
              data-page={1}
              onClick={this.onPageClick}
            >
              1
            </a>
          </li>
        );
      }

      // show previous
      const prevPageNumber = state.pageNumber - 1;
      if (prevPageNumber > 0) {
        prevElmt = (
          <li className="page-item">
            <a
              className="page-link pagination-prev"
              href="?page={prevPageNumber}"
              data-page={prevPageNumber}
              onClick={this.onPageClick}
            >
              <i className="fa fa-angle-left" aria-hidden="true"></i>
            </a>
          </li>
        );
      }

      // show next
      const nextPageNumber = state.pageNumber + 1;
      if (nextPageNumber <= state.totalPages) {
        nextElmt = (
          <li className="page-item">
            <a
              className="page-link pagination-next"
              href="?page={nextPageNumber}"
              data-page={nextPageNumber}
              onClick={this.onPageClick}
            >
              <i className="fa fa-angle-right" aria-hidden="true"></i>
            </a>
          </li>
        );
      }

      // show last
      if (rangeArray[rangeArray.length - 1] < state.totalPages) {
        lastElmt = (
          <li className="page-item">
            <a
              className="page-link pagination-last"
              href="?page={state.totalPages}"
              data-page={state.totalPages}
              onClick={this.onPageClick}
            >
              {state.totalPages}
            </a>
          </li>
        );
      }
    }

    return (
      <ul className="pagination mmui-pagination justify-content-center">
        {firstElmt}
        {prevElmt}
        {pageRangeElements}
        {nextElmt}
        {lastElmt}
      </ul>
    );
  }
}