import { useState } from 'react'
import { $root, useValue } from 'startupjs'
import Pagination from '../Pagination'
import Row from '../Row'
import { Sandbox } from '@startupjs/docs'

# Pagination

The Pagination component enables the user to select a specific page from a range of pages.

```jsx
import { Pagination } from '@startupjs/ui'
```

## Simple example

- `pages` specifies the total number of pages
- `page` specifies the current page, starting from `0` to `pages - 1`

```jsx example
const [page, setPage] = useState(0)
return (
  <Row align='center'>
    <Pagination
      page={page}
      pages={10}
      onChangePage={setPage}
    />
  </Row>
)
```

## Alternatives

- `count` - total count of items
- `limit` - count of items to display per page
- `skip` - count of items to skip

You can use them instead of `pages` or `page` properties:

- `count` and `limit` instead of `pages`
- `limit` and `skip` instead of `page`

```jsx example
const COUNT = 100
const LIMIT = 10
const [skip, setSkip] = useState(0)
return (
  <Row align='center'>
    <Pagination
      count={COUNT}
      limit={LIMIT}
      skip={skip}
      onChangePage={(val) => setSkip(val * LIMIT)}
    />
  </Row>
)
```

## Two-way data bindings

You can use two-way data bindings `$page`, `$limit`, `$skip` instead of `page`, `limit`, `skip` respectively.

```jsx example
const [, $page] = useValue(0)
return (
  <Row align='center'>
    <Pagination
      $page={$page}
      pages={10}
    />
  </Row>
)
```

```jsx example
const LIMIT = 10
const [, $skip] = useValue(0)
return (
  <Row align='center'>
    <Pagination
      pages={10}
      limit={LIMIT}
      $skip={$skip}
      onChangePage={(val) => $skip.set(val * LIMIT)}
    />
  </Row>
)
```

## Buttons

- `showPrevButton` displays the previous-page button, (default `true`)
- `showNextButton` displays the next-page button (default `true`)
- `showFirstButton` displays the first-page button (default `false`)
- `showLastButton` displays the last-page button (default `false`)

```jsx example
const [page, setPage] = useState(0)
return (
  <Row align='center'>
    <Pagination
      page={page}
      pages={10}
      showPrevButton={false}
      showNextButton={false}
      showFirstButton
      showLastButton
      onChangePage={setPage}
    />
  </Row>
)
```

## Compact view

To display the component in a compact view pass `variant='compact'`.

```jsx example
const [page, setPage] = useState(0)
return (
  <Row align='center'>
    <Pagination
      variant='compact'
      page={page}
      pages={10}
      onChangePage={setPage}
    />
  </Row>
)
```

## Visible pages

You can control the visibility of pages when component has default view (`variant='full'`).

- `boundaryCount` controls the number of visible pages at the beginning and end
- `siblingCount` controls the number of visible pages before and after the current page

```jsx example
const [page, setPage] = useState(5)
return (
  <Row align='center'>
    <Pagination
      page={page}
      boundaryCount={2}
      siblingCount={0}
      pages={10}
      onChangePage={setPage}
    />
  </Row>
)
```

## Sandbox

<Sandbox
  Component={Pagination}
  props={{
    page: $root.get('_session.Props.Pagination.page'),
    onChangePage: page => $root.set('_session.Props.Pagination.page', page)
  }}
  $props={$root.scope('_session.Props.Pagination')}
/>