import React, { useEffect, useRef, useState } from 'react';
import renderer from 'react-test-renderer';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import { FormHandles } from '@devesharp/unform-core';
import { Form } from '@devesharp/unform-web';
import 'jest-styled-components';
import { InputCounter } from './InputCounter';

it('snapshot - default', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}}>
               <InputCounter name="default" />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('snapshot - com erro', () => {
   function Component(): any {
      const formRef = useRef<FormHandles>();

      useEffect(() => {
         formRef.current.setFieldError('default', 'Field Invalid');
      }, []);

      return (
         <>
            <Form onSubmit={() => {}} ref={formRef}>
               <InputCounter name="default" />
            </Form>
         </>
      );
   }

   const { container } = render(<Component />);

   expect(screen.getByTestId('input-error')).not.toBeUndefined();

   expect(container.firstChild).toMatchSnapshot();
});

it('incrementar número', () => {
   const onSubmit = jest.fn();

   function Component(): any {
      return (
         <Form onSubmit={(data) => onSubmit(data)}>
            <InputCounter name="default" />
            <button type="submit" data-testid="submit">
               Submit
            </button>
         </Form>
      );
   }

   render(<Component />);

   // Definir data
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('submit'));

   expect(onSubmit).toHaveBeenCalled();
   expect(onSubmit).toHaveBeenCalledWith({
      default: 4,
   });
});

it('add/sub numbers', () => {
   const onChange = jest.fn();

   function Component(): any {
      const [value, setValue] = useState(4);
      return (
         <div>
            <InputCounter
               value={value}
               onInput={(number) => {
                  onChange(number);
                  setValue(number);
               }}
            />
         </div>
      );
   }

   render(<Component />);

   // Definir data
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('sub-number'));
   fireEvent.click(screen.getByTestId('sub-number'));
   fireEvent.click(screen.getByTestId('sub-number'));
   fireEvent.click(screen.getByTestId('sub-number'));

   expect(onChange).toHaveBeenCalled();
   expect(onChange).toHaveBeenCalledWith(4);
   expect(onChange).toHaveBeenCalledWith(5);
   expect(onChange).toHaveBeenCalledWith(6);
   expect(onChange).toHaveBeenCalledWith(7);
   expect(onChange).toHaveBeenCalledWith(8);
});

it('unform - decrementar número', () => {
   const onSubmit = jest.fn();

   function Component(): any {
      return (
         <Form onSubmit={(data) => onSubmit(data)}>
            <InputCounter name="default" />
            <button type="submit" data-testid="submit">
               Submit
            </button>
         </Form>
      );
   }

   render(<Component />);

   // Definir data
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('add-number'));
   fireEvent.click(screen.getByTestId('sub-number'));
   fireEvent.click(screen.getByTestId('sub-number'));
   fireEvent.click(screen.getByTestId('submit'));

   expect(onSubmit).toHaveBeenCalled();
   expect(onSubmit).toHaveBeenCalledWith({
      default: 2,
   });
});
