import type { Meta, StoryObj } from '@storybook/react-vite';
import { useState } from 'react';
import { Pagination } from '../../src/ui/Pagination/Pagination';

const meta: Meta<typeof Pagination> = {
  title: 'UI/Pagination',
  component: Pagination,
  parameters: { layout: 'padded' },
  tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Pagination>;

function Controlled(args: React.ComponentProps<typeof Pagination>) {
  const [page, setPage] = useState(args.page);
  const [pageSize, setPageSize] = useState(args.pageSize);
  return (
    <Pagination
      {...args}
      page={page}
      pageSize={pageSize}
      onPageChange={setPage}
      onPageSizeChange={args.onPageSizeChange ? setPageSize : undefined}
    />
  );
}

export const FewPages: Story = {
  render: (args) => <Controlled {...args} />,
  args: { page: 1, pageSize: 10, total: 30 },
};

export const ManyPages: Story = {
  render: (args) => <Controlled {...args} />,
  args: { page: 5, pageSize: 10, total: 200 },
};

export const LastPage: Story = {
  render: (args) => <Controlled {...args} />,
  args: { page: 20, pageSize: 10, total: 200 },
};

export const SinglePage: Story = {
  render: (args) => <Controlled {...args} />,
  args: { page: 1, pageSize: 10, total: 7 },
};

export const WithPageSizeSelector: Story = {
  render: (args) => <Controlled {...args} />,
  args: {
    page: 1,
    pageSize: 10,
    total: 150,
    onPageSizeChange: () => {},
  },
};