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 { ISelectItems, Select } from '.';
import 'jest-styled-components';

it('renderizar default', () => {
   function Component(): any {
      return (
         <Form onSubmit={() => {}}>
            <Select name="default">
               <option value="Eren">Eren</option>
               <option value="Levi">Levi</option>
               <option value="Rainer">Rainer</option>
               <option value="Falco">Falco</option>
            </Select>
         </Form>
      );
   }

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

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

it('renderizar with options array', () => {
   const items: ISelectItems[] = [
      { name: 'Eren', id: 'Eren' },
      { name: 'Levi', id: 'Levi' },
      { name: 'Rainer', id: 'Rainer' },
      { name: 'Falco', id: 'Falco' },
   ];

   function Component(): any {
      return (
         <Form onSubmit={() => {}}>
            <Select name="default" items={items} />
         </Form>
      );
   }

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

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

it('renderizar with title', () => {
   const items: ISelectItems[] = [
      { name: 'Eren', id: 'Eren' },
      { name: 'Levi', id: 'Levi' },
      { name: 'Rainer', id: 'Rainer' },
      { name: 'Falco', id: 'Falco' },
   ];

   function Component(): any {
      return (
         <>
            <Form onSubmit={() => {}}>
               <Select name="default" items={items} title="Characters" />
            </Form>
         </>
      );
   }

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

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

it('renderizar with initial value', () => {
   const items: ISelectItems[] = [
      { name: 'Eren', id: 'Eren' },
      { name: 'Levi', id: 'Levi' },
      { name: 'Rainer', id: 'Rainer' },
      { name: 'Falco', id: 'Falco' },
   ];

   function Component(): any {
      return (
         <Form onSubmit={() => {}} initialData={{ default: 'Falco' }}>
            <Select name="default" items={items} title="Characters" />
         </Form>
      );
   }

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

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