import React from "react";

import { storiesOf } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";
import withTests from "../../withTests.js";

import Pagination from "guc/Pagination/Pagination";

const linkFactory = ({ page, label }) => (
  <a href={"javascript:void"}>{ label || page }</a>
);

storiesOf("Paginatie/Paginatie", module)
  .addDecorator(withTests("Pagination"))
  .add(
    "Paginatie",
    withInfo({
      inline: true,
      text:
      `
      Het paginatie component toont op basis van de meegegeven linkFactory, het aantal pagina's en de huidige pagina, een aantal navigatie opties. De de huidige pagina groter dan 1 is, toont het twee paginatie items, namelijk "terug naar begin" en "een pagina terug". Als het totaal aantal pagina's groter is dan de huidige pagina, toont het twee paginatie items, een voor "volgende pagina" en een voor "laatste pagina". Verder toont het als dat mogelijk is tot twee pagina's met een pagina-nummer minder en meer dan het huidige paginanummer.

      \`\`\`js
      import Pagination from "guc/Layouts/Pagination";

      const linkFactory = ({ page, label }) => (
        <a href={\`?page=$\{page\}\`}>{ label || page }</a>
      );

      <Pagination linkFactory={ linkFactory } page="5" totalPages={ 10 } />
      \`\`\`
      `
    })(
      () => (
        <Pagination linkFactory={ linkFactory } page={ 5 } totalPages={ 10 } />
      )
    )
  );