import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Base from 'terra-base';
import Button from 'terra-button';
import ProgressivePaginator from 'terra-paginator/lib/ProgressivePaginator';

class App extends Component {
  constructor(props) {
    super(props);

    this.onPageChange = this.onPageChange.bind(this);
    this.reduce = this.reduce.bind(this);

    this.state = {
      selectedPage: 1,
      itemCountPerPage: 10,
      totalCount: 30,
    };
  }

  onPageChange() {
    // doesn't really matter what is in here
  }

  reduce() {
    // Change from the service made the total count of the list 1
    this.setState({ totalCount: 5, selectedPage: 1 });
  }

  render() {
    return (
      <Base>
        <Button
          variant="emphasis"
          text="Change the paginator"
          onClick={this.reduce}
        />
        <ProgressivePaginator
          itemCountPerPage={this.state.itemCountPerPage}
          onPageChange={this.onPageChange}
          selectedPage={this.state.selectedPage}
          totalCount={this.state.totalCount}
        />
      </Base>
    );
  }
}