import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, text } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
import Pagination from './'

<Meta
  title="Components/Wayfinding/Pagination"
  component={Pagination}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A11976',
    },
  }}
/>

# Pagination

A Pagination component listing the current items visible for a given range. It can also add a navigation that will let a user update the active page based on the total of items

<Canvas>
  <Story name="default">
    <Pagination
      totalItems={number('totalItems', 255)}
      rangePerPage={number('rangePerPage', 50)}
      onChange={action('changePage')}
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Jared
- **Engineering**: PL
- **Usage**: Hs App

<br />
<br />

### Props

<ArgsTable of={Pagination} />

### Stories

#### Without navigation

<Canvas>
  <Story name="without navigation">
    <Pagination
      subject={text('subject', 'Item')}
      totalItems={number('totalItems', 255)}
      rangePerPage={number('rangePerPage', 50)}
      activePage={number('activePage', 2)}
      showNavigation={boolean('showNavigation', false)}
    />
  </Story>
</Canvas>

#### With subject

<Canvas>
  <Story name="with subject">
    <Pagination
      totalItems={number('totalItems', 255)}
      rangePerPage={number('rangePerPage', 50)}
      onChange={action('changePage')}
      subject={text('subject', 'Customer')}
    />
  </Story>
</Canvas>

#### Loading

<Canvas>
  <Story name="loading">
    <Pagination
      totalItems={number('totalItems', 255)}
      rangePerPage={number('rangePerPage', 30)}
      onChange={action('changePage')}
      subject={text('subject', 'Customer')}
      activePage={number('activePage', 5)}
      isLoading={boolean('isLoading', true)}
    />
  </Story>
</Canvas>

#### Custom Content

<Canvas>
  <Story name="custom content">
    <Pagination
      totalItems={number('totalItems', 255)}
      rangePerPage={number('rangePerPage', 30)}
      subject={text('subject', 'conversation')}
      activePage={number('activePage', 5)}
      renderCustomContent={({
        startRange,
        endRange,
        numberOfPages,
        currentPage,
        pluralizedSubject,
      }) => {
        return (
          <div style={{ fontFamily: 'monospace' }}>
            {number('totalItems', 255)} total {pluralizedSubject} • 26 active
          </div>
        )
      }}
    />
  </Story>
</Canvas>
