import React from 'react';
import { faBars, faAddressBook } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { storiesOf } from '@storybook/react-native';
import { NavigationBar } from '.';

storiesOf('NavigationBar', module)
   .add('default', () => {
      return <NavigationBar title="NavigationBar Title" goBack={() => {}} />;
   })
   .add('with menu icon', () => {
      return <NavigationBar title="NavigationBar Title" openMenu={() => {}} />;
   })
   .add('with big text', () => {
      return (
         <NavigationBar
            title="NavigationBar Title NavigationBar Title NavigationBar Title NavigationBar Title"
            openMenu={() => {}}
         />
      );
   })
   .add('with colors', () => {
      return (
         <NavigationBar
            title="NavigationBar Title"
            color="rgba(255,255,255,0.8)"
            openMenu={() => {}}
            background="crimson"
         />
      );
   })
   .add('with icons actions', () => {
      return (
         <NavigationBar
            title="NavigationBar Title"
            color="rgba(255,255,255,0.8)"
            openMenu={() => {}}
            background="crimson"
            actionsButtons={[
               {
                  render: <FontAwesomeIcon icon={faBars} color="white" />,
                  onPress: () => {},
               },
               {
                  render: <FontAwesomeIcon icon={faAddressBook} color="white" />,
                  onPress: () => {},
               },
            ]}
         />
      );
   });
