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 { Radio } from './Radio';
import 'jest-styled-components';

it('renderizar default', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}}>
            <Radio
               name="default"
               options={[
                  { id: 'M', label: 'Male' },
                  { id: 'F', label: 'Female' },
                  { id: 'D', label: 'Disabled', disabled: true },
               ]}
            />
         </Form>
      );
   }

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

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

it('renderizar with color', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}} initialData={{ checkbox: true }}>
            <Radio
               color="orange"
               name="radio"
               options={[
                  { id: 'M', label: 'Male' },
                  { id: 'F', label: 'Female' },
                  { id: 'D', label: 'Disabled', disabled: true },
               ]}
            />
         </Form>
      );
   }

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

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

it('renderizar with object value', () => {
   function Component(): any {
      return (
         <>
            <Form onSubmit={() => {}} initialData={{ radio: { id: 'F' } }}>
               <Radio
                  color="red"
                  name="radio"
                  options={[
                     { id: { id: 'M' }, label: 'Male' },
                     { id: { id: 'F' }, label: 'Female' },
                     { id: { id: 'D' }, label: 'Disabled', disabled: true },
                  ]}
               />
            </Form>
            <Form onSubmit={() => {}} initialData={{ radio: { id: 'T' } }}>
               <Radio
                  color="red"
                  name="radio"
                  options={[
                     { id: { id: 'M' }, label: 'Male' },
                     { id: { id: 'F' }, label: 'Female' },
                     { id: { id: 'D' }, label: 'Disabled', disabled: true },
                  ]}
               />
            </Form>
         </>
      );
   }

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

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

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

      useEffect(() => {
         formRef.current.setFieldValue('radio', { id: 'F' });
      }, []);

      return (
         <Form onSubmit={() => {}} initialData={{ radio: { id: 2 } }} ref={formRef}>
            <Radio
               name="radio"
               options={[
                  { id: { id: 'M' }, label: 'Male' },
                  { id: { id: 'F' }, label: 'Female' },
                  { id: { id: 'D' }, label: 'Disabled', disabled: true },
               ]}
            />
         </Form>
      );
   }

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

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

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

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

      return (
         <Form onSubmit={() => {}} initialData={{ radio: { id: 2 } }} ref={formRef}>
            <Radio
               name="radio"
               options={[
                  { id: { id: 'M' }, label: 'Male' },
                  { id: { id: 'F' }, label: 'Female' },
                  { id: { id: 'D' }, label: 'Disabled', disabled: true },
               ]}
            />
         </Form>
      );
   }

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

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

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

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

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

      return (
         <Form onSubmit={() => {}} initialData={{ checkbox: { id: 2 } }} ref={formRef}>
            <Radio
               name="radio"
               options={[
                  { id: { id: 'M' }, label: 'Male' },
                  { id: { id: 'F' }, label: 'Female', disabled: true },
                  { id: { id: 'D' }, label: 'Disabled', disabled: true },
               ]}
            />
         </Form>
      );
   }

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

   expect(screen.getAllByTestId('input-radio-circle')[0].className).not.toContain('disabled');
   expect(screen.getAllByTestId('input-radio-circle')[1].className).toContain('disabled');
   expect(screen.getAllByTestId('input-radio-circle')[2].className).toContain('disabled');

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