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

const optionsTabs = [
   {
      id: 1,
      name: 'AAA',
   },
   {
      id: 2,
      name: 'BBB',
   },
   {
      id: 3,
      name: 'CCC',
   },
   {
      id: 4,
      name: 'DDD',
   },
];

it('renderizar padrão', () => {
   const ref = React.createRef();
   const tree = renderer
      .create(<Tabs options={optionsTabs} onSelect={() => {}} />, {
         createNodeMock: (element) => {
            return {
               clientWidth: 100,
               clientHeight: 50,
               offsetLeft: 100 * element.props['data-index'],
               offsetTop: 0,
            };
         },
      })
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar com skeleton', () => {
   const ref = React.createRef();
   const tree = renderer
      .create(<Tabs options={optionsTabs} onSelect={() => {}} skeleton />, {
         createNodeMock: (element) => {
            return {
               clientWidth: 100,
               clientHeight: 50,
               offsetLeft: 100 * element.props['data-index'],
               offsetTop: 0,
            };
         },
      })
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar com valor defaultTab', () => {
   const tree = renderer
      .create(<Tabs options={optionsTabs} onSelect={() => {}} defaultTab={3} />, {
         createNodeMock: (element) => {
            return {
               clientWidth: 100,
               clientHeight: 50,
               offsetLeft: 100 * element.props['data-index'],
               offsetTop: 0,
            };
         },
      })
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar com valor click', () => {
   const tree = renderer.create(<Tabs options={optionsTabs} onSelect={() => {}} />, {
      createNodeMock: (element) => {
         return {
            clientWidth: 100,
            clientHeight: 50,
            offsetLeft: 100 * element.props['data-index'],
            offsetTop: 0,
         };
      },
   });

   renderer.act(() => {
      const tabEl = tree.root.find((element) => element.props['data-index'] === 3);
      tabEl.props.onClick();
   });

   expect(tree.toJSON()).toMatchSnapshot();
});

it('testar onClick', (done) => {
   function handleClick(tab: ITab): void {
      expect(tab).toEqual({ id: 2, name: 'BBB' });
      done();
   }

   render(<Tabs options={optionsTabs} onSelect={handleClick} />);

   fireEvent.click(screen.getByTestId('tab-2'));
});

it('testar ref setTab', () => {
   const ref = React.createRef<ITabsRef>();

   render(<Tabs options={optionsTabs} onSelect={() => {}} ref={ref} />);

   act(() => {
      ref.current.setTab(3);
   });

   fireEvent.click(screen.getByTestId('tab-2'));

   // Ativar tab
   expect(screen.getByTestId('tab-2').className).toBe('tab active');
});
