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

function ComponentMock(): any {
   const openModal = (): void => {
      Alert.show({
         title: 'Hello, how are you?',
         message: 'Welcome, click the confirm button to win a bonus!',
         buttons: [
            {
               text: 'Cancel',
               bgColor: '#bbb',
               onPress: () => {
                  console.log('sdds');
               },
            },
            {
               text: 'Confirm',
               bgColor: '#222',
               onPress: () => {
                  console.log('sdds');
               },
            },
         ],
      });
   };

   return (
      <View style={{ padding: 10 }}>
         <Button title="Open Alert" onPress={() => openModal()} testID="btn" />
         <Alert />
      </View>
   );
}

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

   expect(toJSON()).toMatchSnapshot();

   // Open
   fireEvent.press(getByTestId('btn'));
   expect(toJSON()).toMatchSnapshot();

   // Close
   fireEvent.press(getByTestId('background-alert'));
   expect(toJSON()).toMatchSnapshot();
});

it('onPress', () => {
   const onPress = jest.fn();
   const onPress2 = jest.fn();

   function ComponentMock2(): any {
      const openModal = (): void => {
         Alert.show({
            title: 'Hello, how are you?',
            message: 'Welcome, click the confirm button to win a bonus!',
            buttons: [
               {
                  text: 'Cancel',
                  bgColor: '#bbb',
                  onPress: onPress,
               },
               {
                  text: 'Confirm',
                  bgColor: '#222',
                  onPress: onPress2,
               },
            ],
         });
      };

      return (
         <View style={{ padding: 10 }}>
            <Button title="Open Alert" onPress={() => openModal()} testID="btn" />
            <Alert />
         </View>
      );
   }

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

   expect(toJSON()).toMatchSnapshot();

   // Open
   fireEvent.press(getByTestId('btn'));
   expect(toJSON()).toMatchSnapshot();

   fireEvent.press(getByTestId('alert-btn-1'));

   expect(onPress2).toHaveBeenCalled();
   expect(onPress2).toHaveBeenCalledWith();
   expect(onPress).toHaveBeenCalledTimes(0);
});
