import { useCallback, useState } from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';
import { Pagination } from './pagination';
import type { PaginationProps } from './pagination';

afterEach(cleanup);

const Wrapper = (props: Partial<PaginationProps>) => {
  const [page, setPage] = useState(0);
  const handleChangePage = useCallback((e, newPage) => setPage(newPage), []);

  return (
    <Pagination
      count={100}
      page={page}
      rowsPerPage={10}
      onChangePage={handleChangePage}
      {...props}
    />
  );
};

describe('<Pagination />', () => {
  it(`Should render successfully`, () => {
    const { baseElement } = render(
      <Wrapper getItemAriaLabel={type => `Go to ${type} page`} hideNavigation hideRowCount />
    );
    expect(baseElement).toBeTruthy();
  });

  it(`Should move through pages correctly`, () => {
    const text1 = '1-10 of 100';
    const text2 = '11-20 of 100';
    const text3 = '51-60 of 100';

    const { queryByText, queryByTestId } = render(<Wrapper />);

    let elm = queryByText(text1);
    expect(elm?.innerHTML).toContain(text1);

    const buttonElm = queryByTestId('nextButton');
    buttonElm?.click();

    elm = queryByText(text2);
    expect(elm?.innerHTML).toContain(text2);

    let ellipsisButton = queryByTestId('end-ellipsis');
    ellipsisButton?.click();
    elm = queryByText(text3);
    expect(elm?.innerHTML).toContain(text3);

    ellipsisButton = queryByTestId('start-ellipsis');
    ellipsisButton?.click();
    elm = queryByText(text2);
    expect(elm?.innerHTML).toContain(text2);
  });
});