import {
  Meta,
  Story,
  Preview,
  Props,
} from '@storybook/addon-docs/blocks';
import Location from 'q3-ui-test-utils/lib/location';
import Notifications from '..';
import data from './fixture';

<Meta
  title="Notifications/List"
  component={Notifications}
/>

# Notifications

<Preview>
  <Story name="Event handlers">
    <Location>
      <Notifications
        data={data.map((item) => ({
          ...item,
          acknowledge: () => {
            //alert('ACKNOWLEDGE');
            return Promise.resolve();
          },
        }))}
        buttonComponent={(props) => (
          <button {...props}>Click to open</button>
        )}
        syncSeen={() => {
          //alert('SYNCED/CLICKED');
          return Promise.resolve();
        }}
      />
    </Location>
  </Story>
</Preview>

<Preview>
  <Story name="Loading">
    <Location>
      <Notifications
        buttonComponent={(props) => (
          <button {...props}>Click to open</button>
        )}
        data={data}
        loading
      />
    </Location>
  </Story>
</Preview>

<Preview>
  <Story name="Error">
    <Location>
      <Notifications
        buttonComponent={(props) => (
          <button {...props}>Click to open</button>
        )}
        data={data}
        error
      />
    </Location>
  </Story>
</Preview>