import React, { useState } from 'react';
import Dialog from 'terra-dialog';
import Button from 'terra-button';
import ControlledProgressivePaginator from 'terra-paginator/lib/ControlledProgressivePaginator';
import classNames from 'classnames/bind';
import styles from './PaginatorExampleCommon.module.scss';

const cx = classNames.bind(styles);

const buildPage = () => {
  const fullContent = [<p>This example is used to separate content into discrete pages.</p>,
    <p>The selectedPage must be managed through the state of a parent component, and passed into this paginator through props.</p>];

  return (
    fullContent
  );
};

const ControlledInfiniteProgressivePaginatorExample = () => {
  const [content] = useState(buildPage());
  const [currentPage, setCurrentPage] = useState(1);

  const changePages = (index) => {
    setCurrentPage(index);
  };

  return (
    <div className={cx('paginator-wrapper')}>
      <Dialog
        header={(
          <h1>
            Controlled Progressive Paginator Without Total Count Example
          </h1>
        )}
        footer={<ControlledProgressivePaginator onPageChange={changePages} selectedPage={currentPage} ariaLabel="controlled progressive paginator no total count pagination" />}
      >
        <div>
          <Button text="Set Page to 9" onClick={() => { setCurrentPage(9); }} />
          <Button text="Set Page to 15" onClick={() => { setCurrentPage(15); }} />
          <Button text="Set Page to 45" onClick={() => { setCurrentPage(45); }} />
        </div>
        {content}
      </Dialog>
    </div>
  );
};

export default ControlledInfiniteProgressivePaginatorExample;