import React, { useEffect, useRef, useState } from 'react';
import { View } from 'react-native';
import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { render, fireEvent } from '@testing-library/react-native';
import { Form } from '@unform/mobile';
import { Button } from '.';
import { Input } from '../../Input/native';

it('snapshot - variant', () => {
   const { toJSON, getByTestId } = render(
      <>
         <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>
      </>,
   );

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

it('snapshot - size', () => {
   const { toJSON, getByTestId } = render(
      <>
         <Button size="sm">Small</Button>
         <Button size="md">Medium</Button>
         <Button size="lg">Large</Button>
      </>,
   );

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

it('snapshot - outline', () => {
   const { toJSON, getByTestId } = render(
      <>
         <Button outline>Primary</Button>
      </>,
   );

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

it('snapshot - rounded', () => {
   const { toJSON, getByTestId } = render(
      <>
         <Button rounded>Primary</Button>
      </>,
   );

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

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

   const { toJSON, getByTestId } = render(
      <>
         <Button onPress={handleClick} testID="btn">
            Primary
         </Button>
      </>,
   );

   fireEvent.press(getByTestId('btn'));
});
