import PropTypes from "prop-types";
import React from "react";

import times from "lodash.times";

import PreviousPages from "../PreviousPages";
import NextPages from "../NextPages";
import Page from "../Page";

import styles from "./Pagination.scss";

class Pagination extends React.Component {
  constructor(props) {
    super(props);

    this.previousPages = this.previousPages.bind(this);
    this.nextPages = this.nextPages.bind(this);
  }

  previousPages() {
    const {
      page,
      window,
      ...other
    } = this.props;

    const linkAmount = page - window <= 1 ? new Array(page).length - 1 : window;

    return (
      times(linkAmount, (count) => (
        <Page {...other} key={count} page={page - count - 1} />
      )).reverse()
    );
  }

  nextPages() {
    const {
      page,
      window,
      totalPages,
      ...other
    } = this.props;

    const linkAmount = page + window >= totalPages ? totalPages - page : window;

    return (
      times(linkAmount, (count) => (
        <Page {...other} key={count} page={page + count + 1} />
      ))
    );
  }

  render() {
    const {
      page,
      totalPages,
      ...other
    } = this.props;

    if (totalPages < 1) { return false; }

    return (
      <div className={styles["guc-pagination"]}>
        <PreviousPages {...this.props} />
        <div className={styles["pages"]}>
          {this.previousPages()}

          <Page {...other} key={page}
            current={page === page}
            page={page} variants={["-current"]} />

          {this.nextPages()}
        </div>
        <NextPages {...this.props} />
      </div>
    );
  }
}

Pagination.defaultProps = {
  page: 1,
  totalPages: 1,
  window: 2
};

Pagination.propTypes = {
  totalPages: PropTypes.number,
  page: PropTypes.number,
  window: PropTypes.number
};

export default Pagination;