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 '@unform/core';
import { Form } from '@unform/web';
import 'jest-styled-components';
import { CloseBtn } from '../../CloseBtn';
import { Input } from './Input';

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

it('renderizar prefix with JSX', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}}>
               <Input name="default" prefix={<i className="fas fa-user" />} />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar prefix with text', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}}>
               <Input name="default" prefix="R$" />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar suffix with JSX', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}}>
               <Input name="default" suffix={<i className="fas fa-user" />} />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar suffix with text', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}}>
               <Input name="default" suffix="R$" />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar title', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}}>
               <Input name="default" title="Full Name" />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar textRight', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: 'text-right' }}>
               <Input name="default" textRight />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar with number', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
               <Input name="default" number />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar with number decimals', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
               <Input name="default" number decimals={4} />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar with CEP', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: '08871220' }}>
               <Input name="default" CEP />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar with CNPJ', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
               <Input name="default" CNPJ />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar with CPF', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
               <Input name="default" CPF />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar with RG', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: '461273317' }}>
               <Input name="default" RG />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar with phone', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: '1188881234', number11Digits: '11988881234' }}>
               <Input name="default" phone />
               <Input name="number11Digits" phone />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar no spaces', () => {
   const tree = renderer
      .create(
         <>
            <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
               <Input name="default" noSpaces />
            </Form>
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

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

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

      return (
         <>
            <Form onSubmit={() => {}} initialData={{ default: '10000' }} ref={formRef}>
               <Input name="default" number decimals={2} />
            </Form>
         </>
      );
   }

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

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

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