import React from 'react';
import renderer from 'react-test-renderer';
import { render, fireEvent, screen, act } from '@testing-library/react';
import 'jest-styled-components';
import { CloseBtn } from '../CloseBtn';
import { Pagination } from './index';

it('renderizar página 1 (não tem voltar página)', () => {
   const tree = renderer
      .create(<Pagination total={20} perPage={2} currentPage={1} onChange={(page: number) => {}} />)
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar página 2 (tem voltar página)', () => {
   const tree = renderer
      .create(<Pagination total={20} perPage={2} currentPage={2} onChange={(page: number) => {}} />)
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar página 5 (centro da paginação)', () => {
   const tree = renderer
      .create(<Pagination total={20} perPage={2} currentPage={5} onChange={(page: number) => {}} />)
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar página 9 (tem avançar página)', () => {
   const tree = renderer
      .create(<Pagination total={20} perPage={2} currentPage={9} onChange={(page: number) => {}} />)
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar página 10 (não tem avançar página)', () => {
   const tree = renderer
      .create(<Pagination total={20} perPage={2} currentPage={10} onChange={(page: number) => {}} />)
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('testar onChange ', (done) => {
   function onChange(page: number): void {
      expect(page).toEqual(3);
      done();
   }

   render(<Pagination total={20} perPage={2} currentPage={1} onChange={onChange} />);

   fireEvent.click(screen.getByTestId('page-3'));
});

it('testar avançar', (done) => {
   function onChange(page: number): void {
      expect(page).toEqual(3);
      done();
   }

   render(<Pagination total={20} perPage={2} currentPage={2} onChange={onChange} />);

   fireEvent.click(screen.getByTestId('page-next'));
});

it('testar voltar', () => {
   const onChange = jest.fn();

   render(<Pagination total={20} perPage={2} currentPage={2} onChange={onChange} />);

   fireEvent.click(screen.getByTestId('page-back'));
});

it('snapshot - with color', () => {
   const onChange = jest.fn();

   render(
      <Pagination
         total={20}
         perPage={2}
         currentPage={2}
         onChange={onChange}
         activeTextColor="black"
         activeBgColor="pink"
         textColor="#999"
      />,
   );

   fireEvent.click(screen.getByTestId('page-back'));
});
