import React, { useEffect, useRef, useState } from 'react';
import { Button } from 'react-native';
import { render, fireEvent } from '@testing-library/react-native';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/mobile';
import { ButtonsGroup } from '.';

const options = [
   { name: 'Eren', value: 'Eren' },
   { name: 'Levi', value: 'Levi' },
   { name: 'Rainer', value: 'Rainer' },
   { name: 'Falco', value: 'Falco' },
];

it('snapshot - default', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}}>
            <ButtonsGroup name="default" options={options} />
         </Form>
      );
   }

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

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

it('snapshot - com titulo', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}}>
            <ButtonsGroup name="default" title="ButtonGroup" options={options} />
         </Form>
      );
   }

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

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

it('snapshot - valor inicial', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}} initialData={{ default: 'Rainer' }}>
            <ButtonsGroup name="default" options={options} title="Characters" />
         </Form>
      );
   }

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

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

it('snapshot - valor inicial com multiSelection', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}} initialData={{ default: ['Rainer', 'Falco'] }}>
            <ButtonsGroup name="default" options={options} title="Characters" multiSelection />
         </Form>
      );
   }

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

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

it('onSubmit - padrão', () => {
   const onSubmit = jest.fn();

   function Component(): any {
      const formRef = useRef<FormHandles>();

      return (
         <Form onSubmit={(data) => onSubmit(data)} ref={formRef}>
            <ButtonsGroup name="buttons" options={options} title="Characters" />
            <Button
               testID="submit"
               title="Submit"
               onPress={() => {
                  formRef.current.submitForm();
               }}
            />
         </Form>
      );
   }

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

   // Definir data
   fireEvent.press(getByTestId('button-Levi'));
   fireEvent.press(getByTestId('button-Rainer'));
   fireEvent.press(getByTestId('button-Rainer'));
   fireEvent.press(getByTestId('submit'));

   expect(onSubmit).toHaveBeenCalled();
   expect(onSubmit).toHaveBeenCalledWith({
      buttons: 'Rainer',
   });
});

it('onSubmit - multiSelection', () => {
   const onSubmit = jest.fn();

   function Component(): any {
      const formRef = useRef<FormHandles>();

      return (
         <Form onSubmit={(data) => onSubmit(data)} ref={formRef}>
            <ButtonsGroup name="buttons" options={options} title="Characters" multiSelection />
            <Button
               testID="submit"
               title="Submit"
               onPress={() => {
                  formRef.current.submitForm();
               }}
            />
         </Form>
      );
   }

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

   // Definir data
   fireEvent.press(getByTestId('button-Levi'));
   fireEvent.press(getByTestId('button-Falco'));
   fireEvent.press(getByTestId('button-Rainer'));
   fireEvent.press(getByTestId('button-Falco'));
   fireEvent.press(getByTestId('submit'));

   expect(onSubmit).toHaveBeenCalled();
   expect(onSubmit).toHaveBeenCalledWith({
      buttons: ['Levi', 'Rainer'],
   });
});

it('onSubmit - allowEmpty', () => {
   const onSubmit = jest.fn();

   function Component(): any {
      const formRef = useRef<FormHandles>();

      return (
         <Form onSubmit={(data) => onSubmit(data)} ref={formRef}>
            <ButtonsGroup name="buttons" options={options} title="Characters" allowEmpty />
            <Button
               testID="submit"
               title="Submit"
               onPress={() => {
                  formRef.current.submitForm();
               }}
            />
         </Form>
      );
   }

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

   // Definir data
   fireEvent.press(getByTestId('button-Levi'));
   fireEvent.press(getByTestId('button-Rainer'));
   fireEvent.press(getByTestId('button-Rainer'));
   fireEvent.press(getByTestId('submit'));

   expect(onSubmit).toHaveBeenCalled();
   expect(onSubmit).toHaveBeenCalledWith({
      buttons: null,
   });
});

it('onSubmit - padrão com valor inicial', () => {
   const onSubmit = jest.fn();

   function Component(): any {
      const formRef = useRef<FormHandles>();

      return (
         <Form onSubmit={(data) => onSubmit(data)} initialData={{ buttons: 'Rainer' }} ref={formRef}>
            <ButtonsGroup name="buttons" options={options} title="Characters" />
            <Button
               testID="submit"
               title="Submit"
               onPress={() => {
                  formRef.current.submitForm();
               }}
            />
         </Form>
      );
   }

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

   fireEvent.press(getByTestId('submit'));

   expect(onSubmit).toHaveBeenCalled();
   expect(onSubmit).toHaveBeenCalledWith({
      buttons: 'Rainer',
   });
});

it('onSubmit - multiSelection com valor inicial', () => {
   const onSubmit = jest.fn();

   function Component(): any {
      const formRef = useRef<FormHandles>();

      return (
         <Form onSubmit={(data) => onSubmit(data)} initialData={{ buttons: ['Levi', 'Rainer'] }} ref={formRef}>
            <ButtonsGroup name="buttons" options={options} title="Characters" multiSelection />
            <Button
               testID="submit"
               title="Submit"
               onPress={() => {
                  formRef.current.submitForm();
               }}
            />
         </Form>
      );
   }

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

   // Definir data
   fireEvent.press(getByTestId('submit'));

   expect(onSubmit).toHaveBeenCalled();
   expect(onSubmit).toHaveBeenCalledWith({
      buttons: ['Levi', 'Rainer'],
   });
});
