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

it('renderizar default', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}}>
            <Textarea name="default" />
         </Form>
      );
   }

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

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

it('renderizar with title', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}}>
            <Textarea name="default" title="Description" />
         </Form>
      );
   }

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

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

it('renderizar with error', () => {
   function Component(): any {
      const formRef = useRef<FormHandles>();

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

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

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

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

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

it('renderizar with disabled', () => {
   function Component(): any {
      return (
         <>
            <Form onSubmit={() => {}}>
               <Textarea name="default" title="Description" disabled />
            </Form>
         </>
      );
   }

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

   expect((screen.getAllByTestId('input-textarea')[0] as any).disabled as boolean).toEqual(true);

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

it('renderizar minRows', () => {
   function Component(): any {
      return (
         <>
            <Form onSubmit={() => {}}>
               <Textarea name="default" title="Description" minRows={10} />
            </Form>
         </>
      );
   }

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

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

it('renderizar maxRows', () => {
   function Component(): any {
      return (
         <>
            <Form
               onSubmit={() => {}}
               initialData={{
                  default:
                     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit non diam mollis pharetra. Morbi sit amet felis vel dui malesuada gravida. Fusce pulvinar vulputate cursus. Phasellus nec aliquam nibh, vel posuere erat. Ut eu faucibus mi, ac tempor velit. Aliquam diam diam, fermentum sed turpis quis, vulputate consequat leo. Nulla eros odio, molestie id interdum maximus, hendrerit non mi. Duis nunc neque, eleifend sed venenatis sit amet, sollicitudin quis elit. Ut vel gravida neque.',
               }}
            >
               <Textarea name="default" title="Description" maxRows={7} />
            </Form>
         </>
      );
   }

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

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

it('renderizar verificar dados submit', (done) => {
   function Component(): any {
      const formRef = useRef<FormHandles>();

      return (
         <Form
            onSubmit={(data) => {
               expect(data.default).toBe('testing');
               done();
            }}
            ref={formRef}
         >
            <Textarea name="default" title="Description" />
            <button type="submit" data-testid="submit" />
         </Form>
      );
   }

   render(<Component />);

   fireEvent.change(screen.getByTestId('input-textarea'), { target: { value: 'testing' } });
   fireEvent.click(screen.getByTestId('submit'));
});
