import React, { useEffect, useRef, useState } from 'react';
import { RFValue } from 'react-native-responsive-fontsize';
import { faBars, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import * as _ from 'lodash';
import { useTheme } from 'styled-components';
import { ITheme } from '../AppProvider/ITheme';
import { TextNative } from '../TextNative';
import { IPropsNavigationBar } from './NavigationBar.interface';
import {
   Container,
   NavBarStyle,
   MenuContainer,
   TitleContainer,
   ActionsRightContainer,
   ActionButton,
} from './NavigationBar.style';

export const NavigationBar = React.memo(function NavigationBar({
   title,
   color = null,
   background = null,
   goBack,
   openMenu,
   size = 'normal',
   actionsButtons = [],
}: IPropsNavigationBar) {
   const theme: ITheme = useTheme();

   const fontSizeIcon = size === 'large' ? RFValue(17) : RFValue(15);
   const fontSizeTitle = size === 'large' ? 19 : 16;

   return (
      <Container>
         <NavBarStyle size={size} background={background}>
            <MenuContainer
               testID="btn-menu-drawer"
               onPress={() => {
                  if (goBack) {
                     goBack();
                  }

                  if (openMenu) {
                     openMenu();
                  }
               }}
            >
               {goBack ? (
                  <FontAwesomeIcon
                     icon={faArrowLeft}
                     color={color || theme?.navigationBar?.textColor || 'white'}
                     size={fontSizeIcon}
                  />
               ) : (
                  <FontAwesomeIcon
                     icon={faBars}
                     color={color || theme?.navigationBar?.textColor || 'white'}
                     size={fontSizeIcon}
                  />
               )}
            </MenuContainer>
            <TitleContainer>
               <TextNative
                  color={color || theme?.navigationBar?.textColor || 'white'}
                  size={fontSizeTitle}
                  ellipsizeMode="tail"
                  numberOfLines={1}
               >
                  {title}
               </TextNative>
            </TitleContainer>
            <ActionsRightContainer>
               {actionsButtons.map((item, i) => (
                  <ActionButton
                     key={`nav-action-btn-${i}`}
                     testID={`nav-action-btn-${i}`}
                     onPress={() => item.onPress()}
                  >
                     {item.render}
                  </ActionButton>
               ))}
            </ActionsRightContainer>
         </NavBarStyle>
      </Container>
   );
},
_.isEqual);
