import React, { useEffect, useRef, useState } from 'react';
import { faAddressBook, faBars } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { render, fireEvent } from '@testing-library/react-native';
import { NavigationBar } from '.';

it('snapshot - default', () => {
   const { toJSON, getByTestId } = render(
      <>
         <NavigationBar title="NavigationBar Title" goBack={() => {}} />
      </>,
   );

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

it('snapshot - with menu icon', () => {
   const { toJSON, getByTestId } = render(
      <>
         <NavigationBar title="NavigationBar Title" openMenu={() => {}} />
      </>,
   );

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

it('snapshot - with big text', () => {
   const { toJSON, getByTestId } = render(
      <>
         <NavigationBar
            title="NavigationBar Title NavigationBar Title NavigationBar Title NavigationBar Title"
            openMenu={() => {}}
         />
      </>,
   );

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

it('snapshot - with colors', () => {
   const { toJSON, getByTestId } = render(
      <>
         <NavigationBar
            title="NavigationBar Title"
            color="rgba(255,255,255,0.8)"
            openMenu={() => {}}
            background="crimson"
         />
      </>,
   );

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

it('snapshot - icons actions', () => {
   const { toJSON, getByTestId } = render(
      <>
         <NavigationBar
            title="NavigationBar Title"
            color="rgba(255,255,255,0.8)"
            openMenu={() => {}}
            background="crimson"
            actionsButtons={[
               {
                  render: <FontAwesomeIcon icon={faBars} color="white" />,
                  onPress: () => {},
               },
               {
                  render: <FontAwesomeIcon icon={faAddressBook} color="white" />,
                  onPress: () => {},
               },
            ]}
         />
      </>,
   );

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

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

   const { getByTestId } = render(<NavigationBar title="NavigationBar Title" goBack={onPress} />);

   fireEvent.press(getByTestId('btn-menu-drawer'));

   expect(onPress).toHaveBeenCalled();
   expect(onPress).toHaveBeenCalledWith();
});

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

   const { getByTestId } = render(<NavigationBar title="NavigationBar Title" openMenu={onPress} />);

   fireEvent.press(getByTestId('btn-menu-drawer'));

   expect(onPress).toHaveBeenCalled();
   expect(onPress).toHaveBeenCalledWith();
});

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

   const { getByTestId } = render(
      <NavigationBar
         title="NavigationBar Title"
         openMenu={() => {}}
         actionsButtons={[
            {
               render: <FontAwesomeIcon icon={faBars} color="white" />,
               onPress: () => {},
            },
            {
               render: <FontAwesomeIcon icon={faAddressBook} color="white" />,
               onPress,
            },
         ]}
      />,
   );

   fireEvent.press(getByTestId('nav-action-btn-1'));

   expect(onPress).toHaveBeenCalled();
   expect(onPress).toHaveBeenCalledWith();
});
