import React, { useRef, useEffect, useState } from 'react';
import { IPropsNavActions } from '../NavActions.interface';
import Style from './NavActions.style';

export const NavActions: React.FunctionComponent<IPropsNavActions> = ({
   actions,
   selected,
   onUnselectAll,
}: IPropsNavActions) => {
   return (
      <Style>
         <div className="nav-actions" data-cy="nav-actions">
            <table>
               <tbody>
                  <tr>
                     <td className="deselect" onClick={onUnselectAll} data-cy="deselect" data-testid="deselect">
                        <i className="far fa-minus-square" />
                     </td>
                     <td className="count-items" data-cy="items-count">
                        {selected}
                     </td>
                     <td className="actions">
                        {actions &&
                           actions.map((i) => (
                              <div className="header-icon" key={i.id} data-cy={`action-${i.id}`} onClick={i.onPress}>
                                 {i.item}
                              </div>
                           ))}
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </Style>
   );
};
