import React from 'react';
import { faMinusSquare } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useTheme } from 'styled-components';
import { ThemeDefault } from '../../types/theme.interface';
import { IPropsNavActions } from './NavActions.interface';
import Style from './NavActions.style';

export const NavActions: React.FunctionComponent<IPropsNavActions> = ({
   options,
   selected,
   onUnselectAll,
   backgroundColor,
   textColor: textColorProps,
}: IPropsNavActions) => {
   const theme: any = useTheme();
   const { navActions = {} } = theme ?? {};
   const { textColor } = navActions;
   const color = textColorProps ?? textColor ?? ThemeDefault.primaryTextInside;

   return (
      <Style color={color} background={backgroundColor}>
         <div className="nav-actions" data-testid="nav-actions">
            <table>
               <tbody>
                  <tr>
                     <td className="deselect" onClick={onUnselectAll} data-testid="deselect">
                        <FontAwesomeIcon icon={faMinusSquare} />
                     </td>
                     <td className="count-items" data-testid="items-count">
                        {selected}
                     </td>
                     <td className="actions">
                        {options &&
                           options.map((i) => (
                              <div
                                 className="header-icon"
                                 key={i.id}
                                 data-testid={`action-${i.id}`}
                                 onClick={i.onPress}
                              >
                                 {i.item}
                              </div>
                           ))}
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </Style>
   );
};
