import React, { Component } from 'react';
import { priceMapper } from '../../store/mappers';

class PricesTableFooter extends Component {
  constructor(props) {
    super(props);
    this.onClickPrevious = this.onClickPrevious.bind(this);
    this.onClickNext = this.onClickNext.bind(this);
  }
  onClickPrevious() {
    var price = this.props.price;
    if (price.skip >= price.take) {
      price.skip -= price.take;
      this.props.setPriceFilter(price);
    }
  }

  onClickNext() {
    var price = this.props.price;
    if (price.list.length === price.take) {
      price.skip += price.take;
      this.props.setPriceFilter(price);
    }
  }
  render() {
    const prevClass = this.props.price.skip < 1 ? 'disabled' : '';
    const nextClass =
      this.props.price.list.length < this.props.price.take ? 'disabled' : '';
    return (
      <div className="card-footer py-4">
        {prevClass === 'disabled' && nextClass === 'disabled' ? (
          ''
        ) : (
          <nav aria-label="...">
            <ul className="pagination justify-content-end mb-0">
              <li
                className={'page-item ' + prevClass}
                onClick={this.onClickPrevious}
              >
                <button className="page-link">
                  <i className="fas fa-angle-left" />
                  <span className="sr-only">Previous</span>
                </button>
              </li>
              <li
                className={'page-item ' + nextClass}
                onClick={this.onClickNext}
              >
                <button className="page-link">
                  <i className="fas fa-angle-right" />
                  <span className="sr-only">Next</span>
                </button>
              </li>
            </ul>
          </nav>
        )}
      </div>
    );
  }
}

export default priceMapper(PricesTableFooter);
