import React from 'react';
import renderer from 'react-test-renderer';
import { render, fireEvent, screen } from '@testing-library/react';
import 'jest-styled-components';
import { ThemeProvider } from 'styled-components';
import { ITheme } from '../../types/theme.interface';
import { Button } from './index';

it('renderizar cores de button', () => {
   const tree = renderer
      .create(
         <>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="success">Success</Button>
            <Button variant="warning">Warning</Button>
            <Button variant="danger">Danger</Button>
            <Button variant="info">Info</Button>
            <Button variant="light">Light</Button>
            <Button variant="dark">Dark</Button>
            <Button variant="link">Link</Button>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar tamanhos de button', () => {
   const tree = renderer
      .create(
         <>
            <Button size="sm">Small</Button>
            <Button size="md">Medium</Button>
            <Button size="lg">Large</Button>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar com bgColor', () => {
   const tree = renderer
      .create(
         <>
            <Button bgColor="pink">Primary</Button>
            <Button bgColor="pink" outline>
               Primary
            </Button>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('snapshot with theme primary and primaryTextInside', () => {
   const tree = renderer
      .create(
         <>
            <ThemeProvider
               theme={
                  {
                     primary: 'pink',
                     primaryTextInside: 'black',
                  } as ITheme
               }
            >
               <Button>Primary</Button>
            </ThemeProvider>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar com theme', () => {
   const tree = renderer
      .create(
         <>
            <ThemeProvider
               theme={{
                  button: {
                     defaultColor: 'pink',
                     rounded: true,
                     outline: true,
                     textStyle: {
                        fontWeight: 'bold',
                        color: 'pink',
                     },
                  },
               }}
            >
               <Button>Primary</Button>
            </ThemeProvider>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('testar onClick', (done) => {
   function handleClick(): void {
      done();
   }
   render(<Button onClick={handleClick} data-testid="btn" />);

   fireEvent.click(screen.getByTestId('btn'));
});
