import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Paginate from 'react-paginate';

import './pagination.scss';

const propTypes = {
  pageCount: PropTypes.number.isRequired,
  pageRangeDisplayed: PropTypes.number.isRequired,
  marginPagesDisplayed: PropTypes.number.isRequired,
  forcePage: PropTypes.number,
  className: PropTypes.string
};

const defaultProps = {
  forcePage: null,
  className: undefined
};

class Pagination extends PureComponent {
  render() {
    const { pageCount, pageRangeDisplayed, marginPagesDisplayed, forcePage, className } = this.props;

    return (
      <div styleName="wrapper" className={className}>
        <div styleName="base">
          <Paginate
            previousLabel="<"
            nextLabel=">"
            previousClassName="pagination-previous"
            nextClassName="pagination-next"
            disabledClassName="disabled"
            containerClassName="pagination-container"
            breakClassName="pagination-item"
            pageClassName="pagination-item"
            pageLinkClassName="pagination-item-link"
            pageCount={pageCount}
            pageRangeDisplayed={pageRangeDisplayed}
            marginPagesDisplayed={marginPagesDisplayed}
            forcePage={forcePage}
            {...this.props}
          />
        </div>
      </div>
    );
  }
}


Pagination.propTypes = propTypes;
Pagination.defaultProps = defaultProps;

export default Pagination;
