import React, { useState } from 'react';
import { View } from 'react-native';
import { faTrashAlt, faStar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { storiesOf } from '@storybook/react-native';
import { Button } from '../../Button/native';
import { NavActions } from './NavActions';
// import {
//    faStar,
// } from '@fortawesome/free-solid-svg-icons';

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

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

            return newValue;
         });
      }

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

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

            <Button onPress={addItems}>
               Adicionar Item
            </Button>
         </View>
      );
   }

   return <Stub />;
});
