import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { NavActions } from './NavActions';

storiesOf('Components/NavActions', module).add('default', () => {
   const [items, setItems] = useState([]);

   function addItems(): void {
      setItems((draft) => {
         const newValue = Array.from(draft);
         newValue.push([]);

         return newValue;
      });
   }

   function onUnselectAll(): void {
      setItems([]);
   }

   return (
      <div>
         <NavActions
            actions={[
               {
                  id: 'star',
                  item: <i className="fas fa-star" />,
                  onPress: () => {},
               },
               {
                  id: 'unstar',
                  item: <i className="far fa-star" />,
                  onPress: () => {},
               },
               {
                  id: 'delete',
                  item: <i className="far fa-trash-alt" />,
                  onPress: () => {},
               },
            ]}
            selected={items.length}
            onUnselectAll={onUnselectAll}
         />

         <div className="p-4">
            <button onClick={addItems}>Adicionar Item</button>
         </div>
      </div>
   );
});
