import { Story, Meta } from '@storybook/react';
import { useEffect, useState } from 'react';
import { Pagination as PaginationComponent, PaginationProps } from './pagination';

const args: Omit<PaginationProps, 'onChangePage'> = {
  page: 1,
  count: 100,
  rowsPerPage: 20
};

export default {
  args,
  component: PaginationComponent,
  title: 'Buttons/Buttons',
  argTypes: {
    page: {
      description: 'Current page, starts count from 0.'
    },
    count: {
      description: 'Total number of items.'
    },
    rowsPerPage: {
      description: 'Number of items to be displayed in a page.'
    }
  }
} as Meta;

const Template: Story<PaginationProps> = args => {
  const { page } = args;
  const [curPage, setPage] = useState(page);

  useEffect(() => {
    setPage(page);
  }, [page]);

  const handleChangePage: PaginationProps['onChangePage'] = (e, p) => {
    setPage(p);
  };

  return <PaginationComponent {...args} page={curPage} onChangePage={handleChangePage} />;
};

export const Pagination = Template.bind({});