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 { Input } from '.';

it('snapshot - default', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}}>
         <Input name="default" />
      </Form>,
   );

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

it('snapshot - title', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}}>
         <Input name="default" title="Title" />
      </Form>,
   );

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

it('snapshot - with text', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}}>
         <Input name="default" title="Title" prefix="sdsd" />
      </Form>,
   );

   expect(toJSON()).toMatchSnapshot();
});
it('snapshot - with JSX', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}}>
         <Input name="default" title="Title" prefix={<FontAwesomeIcon icon={faUserAlt} />} />
      </Form>,
   );

   expect(toJSON()).toMatchSnapshot();
});
it('snapshot - with text', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}}>
         <Input name="default" title="Title" suffix="sdsd" />
      </Form>,
   );

   expect(toJSON()).toMatchSnapshot();
});
it('snapshot - with JSX', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}}>
         <Input name="default" title="Title" suffix={<FontAwesomeIcon icon={faUserAlt} />} />
      </Form>,
   );

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

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

it('snapshot - number', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
         <Input name="default" number />
      </Form>,
   );

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

it('snapshot - number decimals', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
         <Input name="default" number decimals={4} />
      </Form>,
   );

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

it('snapshot - CEP', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: '08871220' }}>
         <Input name="default" CEP />
      </Form>,
   );

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

it('snapshot - CNPJ', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
         <Input name="default" CNPJ />
      </Form>,
   );

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

it('snapshot - CPF', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
         <Input name="default" CPF />
      </Form>,
   );

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

it('snapshot - RG', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: '461273317' }}>
         <Input name="default" RG />
      </Form>,
   );

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

it('snapshot - phone', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: '1188881234', number11Digits: '11988881234' }}>
         <Input name="default" phone />
         <Input name="number11Digits" phone />
      </Form>,
   );

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

it('snapshot - spaces', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
         <Input name="default" noSpaces />
      </Form>,
   );

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

it('snapshot - error', () => {
   function ComponentMock(): any {
      const formRef = useRef(null);

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

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

   const { toJSON, queryByTestId } = render(<ComponentMock />);

   expect(toJSON()).toMatchSnapshot();

   expect(queryByTestId('input-error')).not.toBeNull();
});

it('snapshot - with password', () => {
   const { toJSON, getByTestId } = render(
      <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
         <Input name="default" password />
      </Form>,
   );

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