import React, { useState } from 'react';
import renderer from 'react-test-renderer';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import { Modal } from './Modal';
import 'jest-styled-components';
import { CloseBtn } from '../CloseBtn';

it('renderizar modal aberto', () => {
   const tree = renderer.create(<Modal show />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('renderizar modal fechado', () => {
   const tree = renderer.create(<Modal show={false} />).toJSON();
   expect(tree).toMatchSnapshot();
});

it('loads and displays greeting', async () => {
   function ComponentExample(): any {
      const [show, setShow] = useState(false);
      const [hide, setHide] = useState(false);

      return (
         <>
            <span role="onHide">{hide && 'onHide is called'}</span>
            <button onClick={() => setShow(true)} role="button">
               button
            </button>
            <Modal
               show={show}
               onHide={() => {
                  setHide(true);
               }}
            >
               <Modal.Body className="p-4">
                  <span role="close-btn">
                     <CloseBtn onClick={() => setShow(false)} />
                  </span>
                  <div className="p-4" role="modal-body">
                     Modal Body
                  </div>
               </Modal.Body>
            </Modal>
         </>
      );
   }

   render(<ComponentExample />);

   // não deve mostrar modal
   expect(screen.queryByText('Modal1')).toBeNull();

   fireEvent.click(screen.getByText('button'));
   await waitFor(() => screen.getByText('Modal Body'));

   // mostrar modal
   expect(screen.queryByText('Modal Body')).not.toBeNull();

   // fechar modal
   fireEvent.click(screen.getByRole('close-btn'));

   // chamar onHide
   await waitFor(() => screen.queryByText('onHide is called'));
});
