import React, { useEffect, useRef, useState } from 'react';
import { render, fireEvent, act } from '@testing-library/react-native';
import { ActionSheet, IItemsActionSheetOption } from '.';
import 'jest-styled-components';
import { faPen, faTimes, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { Button, View } from 'react-native';

function ComponentMock(): any {
   function openActionSheet(): any {
      ActionSheet.show({
         options: [
            { text: `Editar`, key: 'edit', icon: faPen },
            { text: 'Deletar', key: 'delete', icon: faTrashAlt, iconColor: 'red' },
            { text: 'Cancelar', key: 'cancel', icon: faTimes, cancel: true },
         ],
         onPress: (el: IItemsActionSheetOption, index: number): void => {
            console.log('sdsd');
         },
      });
   }

   return (
      <View style={{ flex: 1 }}>
         <View>
            <Button title="Open ActionSheet" onPress={() => openActionSheet()} testID="btn" />
         </View>
         <ActionSheet />
      </View>
   );
}

it('snapshot - padrão', () => {
   const { toJSON } = render(<ComponentMock />);

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

it('snapshot - open actionsheet', () => {
   const { toJSON, getByTestId, queryByTestId } = render(<ComponentMock />);

   expect(queryByTestId('action-sheet')).toBeNull();

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

   expect(queryByTestId('action-sheet')).not.toBeNull();

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

it('snapshot - close actionSheet', async () => {
   function ComponentActionSheet(): any {
      function openActionSheet(): any {
         ActionSheet.show({
            options: [
               { text: `Editar`, key: 'edit', icon: faPen },
               { text: 'Deletar', key: 'delete', icon: faTrashAlt, iconColor: 'red' },
               { text: 'Cancelar', key: 'cancel', icon: faTimes, cancel: true },
            ],
            onPress: (el: IItemsActionSheetOption, index: number): void => {},
         });
      }

      return (
         <View style={{ flex: 1 }}>
            <View>
               <Button title="Open ActionSheet" onPress={() => openActionSheet()} testID="btn" />
            </View>
            <ActionSheet />
         </View>
      );
   }

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

   fireEvent.press(getByTestId('btn'));
   // Abrir
   expect(queryByTestId('action-sheet')).not.toBeNull();

   act(() => {
      fireEvent.press(getByTestId('action-sheet-item-1'));
   });

   // Fechar
   expect(queryByTestId('action-sheet')).toBeNull();
});

it('onPress Item', async (done) => {
   function ComponentActionSheet(): any {
      function openActionSheet(): any {
         ActionSheet.show({
            options: [
               { text: `Editar`, key: 'edit', icon: faPen },
               { text: 'Deletar', key: 'delete', icon: faTrashAlt, iconColor: 'red' },
               { text: 'Cancelar', key: 'cancel', icon: faTimes, cancel: true },
            ],
            onPress: (el: IItemsActionSheetOption, index: number): void => {
               expect(el.key).toEqual('delete');
               done();
            },
         });
      }

      return (
         <View style={{ flex: 1 }}>
            <View>
               <Button title="Open ActionSheet" onPress={() => openActionSheet()} testID="btn" />
            </View>
            <ActionSheet />
         </View>
      );
   }

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

   expect(queryByTestId('action-sheet')).toBeNull();
   
   fireEvent.press(getByTestId('btn'));
   fireEvent.press(getByTestId('action-sheet-item-1'));
});
