import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import waitForExpect from 'wait-for-expect';
import { Slider } from './Slider';
import 'jest-styled-components';
import { Container } from './Slider.stories';

describe('Slider', () => {
   const images = [
      {
         image: 'https://i.pinimg.com/originals/bf/cb/78/bfcb784e79876d8db7f66ba6be3efeec.jpg',
      },
      {
         image:
            'https://ae01.alicdn.com/kf/He7d47c113d504fd6988313c94af1590dM/Cabletime-esta-o-de-carga-com-adaptador-usb-usb-hub-c-4k-60hz-pd100w-m-2.jpg_Q90.jpg_.webp',
      },
      {
         image:
            'https://ae01.alicdn.com/kf/He7d47c113d504fd6988313c94af1590dM/Cabletime-esta-o-de-carga-com-adaptador-usb-usb-hub-c-4k-60hz-pd100w-m-2.jpg_Q90.jpg_.webp',
      },
      {
         image:
            'https://ae01.alicdn.com/kf/H20bc2fe65dc2407383a5d5596931db8ba/Cabletime-esta-o-de-carga-com-adaptador-usb-usb-hub-c-4k-60hz-pd100w-m-2.jpg_Q90.jpg_.webp',
      },
   ];

   it('snapshot - initial', async () => {
      function ComponentExample(): any {
         return <Slider items={images} />;
      }

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

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

   it('snapshot - box count position', async () => {
      function ComponentExample(): any {
         return (
            <div>
               <Slider items={images} height="300px" width="100%" boxCountPos="top-left" />
               <Slider items={images} height="300px" width="100%" boxCountPos="top-center" />
               <Slider items={images} height="300px" width="100%" boxCountPos="top-right" />
               <Slider items={images} height="300px" width="100%" boxCountPos="bottom-left" />
               <Slider items={images} height="300px" width="100%" boxCountPos="bottom-center" />
               <Slider items={images} height="300px" width="100%" boxCountPos="bottom-right" />
            </div>
         );
      }

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

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

   it('snapshot - hide box count position', async () => {
      function ComponentExample(): any {
         return <Slider items={images} height="300px" width="100%" showBoxCount={false} />;
      }

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

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

   it('snapshot - with Component', async () => {
      const onRequestClose = jest.fn();
      function ComponentExample(): any {
         function Video(): any {
            return (
               <Container>
                  <div className="carousel--video-ytb">
                     <img src="https://img.youtube.com/vi/ATSgwZXOuUo/sddefault.jpg" />
                     <div className="carousel--play" data-testid="play-video" />
                  </div>
               </Container>
            );
         }

         return <Slider items={[Video, ...images]} onRequestClose={onRequestClose} />;
      }

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

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

   it('onChangeSlide', async () => {
      const onChangeSlide = jest.fn();
      function ComponentExample(): any {
         return <Slider items={images} onChangeSlide={onChangeSlide} />;
      }

      render(<ComponentExample />);

      fireEvent.click(screen.getByTestId('slider-btn-right'));

      expect(onChangeSlide).toHaveBeenCalled();
   });

   it('click background slider', async () => {
      const onRequestClose = jest.fn();
      function ComponentExample(): any {
         return <Slider items={images} onRequestClose={onRequestClose} />;
      }

      render(<ComponentExample />);

      fireEvent.click(screen.getByTestId('slider-background-0'));

      expect(onRequestClose).toHaveBeenCalled();
   });
});
