import React, { useRef, useEffect, useState } from 'react';
import { TouchableOpacity } from 'react-native';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { Flex } from '../../Flex/native';
import { Pressable } from '../../Pressable';
import { IPropsNavActions } from '../NavActions.interface';
import {
   ActionsBtn,
   BackContainer,
   Container,
   CountSelected,
   CountSelectedText,
   Icon,
   IconTouchable,
} from './NavActions.style';

export const NavActions: React.FunctionComponent<IPropsNavActions> = ({
   actions,
   selected,
   onUnselectAll,
}: IPropsNavActions) => {
   return (
      <Container>
         <Pressable onPress={() => onUnselectAll()} ripple testID="deselect">
            <Flex horizontal alignItems="center">
               <BackContainer>
                  <Icon icon={faArrowLeft} />
               </BackContainer>
               <CountSelected>
                  <CountSelectedText>{selected}</CountSelectedText>
               </CountSelected>
            </Flex>
         </Pressable>
         <ActionsBtn>
            {actions &&
               actions.map((i) => (
                  <IconTouchable key={`action-btn-${i.id}`} testID={`action-btn-${i.id}`} onPress={i.onPress} ripple>
                     {i.item}
                  </IconTouchable>
               ))}
         </ActionsBtn>
      </Container>
   );
};
