import React, { useState } from 'react';
import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
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
            options={[
               {
                  id: 'star',
                  item: <FontAwesomeIcon icon={faStar} />,
                  onPress: () => {},
               },
               {
                  id: 'unstar',
                  item: <FontAwesomeIcon icon={faStar} />,
                  onPress: () => {},
               },
               {
                  id: 'delete',
                  item: <FontAwesomeIcon icon={faTrash} />,
                  onPress: () => {},
               },
            ]}
            selected={items.length}
            onUnselectAll={onUnselectAll}
         />

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