import type { Meta, StoryObj } from '@storybook/html';
import { Pagination, type PaginationOptions } from '@42/core/pagination';
import '@42/styles/pagination.css';

const snippet = `import { Pagination } from '@42/core/pagination';
import '@42/styles/pagination.css';

const pager = new Pagination(document.querySelector('[data-c42-pagination]')!, {
  total: 10,
  page: 1,
  siblingCount: 1,
  boundaryCount: 1,
});

pager.on('pagination:change', (e) => console.log(e.detail.page));`;

const meta: Meta<PaginationOptions> = {
  title: 'Core/Navigation/Pagination',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    total: { control: { type: 'number', min: 1 } },
    page: { control: { type: 'number', min: 1 } },
    siblingCount: { control: { type: 'number', min: 0 } },
    boundaryCount: { control: { type: 'number', min: 0 } },
  },
  args: {
    total: 10,
    page: 1,
    siblingCount: 1,
    boundaryCount: 1,
  },
  render: (args) => {
    const root = document.createElement('nav');
    root.dataset.c42Pagination = '';
    root.innerHTML = `
      <button data-c42-pagination-prev>Prev</button>
      <div data-c42-pagination-list></div>
      <button data-c42-pagination-next>Next</button>`;
    new Pagination(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<PaginationOptions>;

export const Default: Story = {};

export const ManyPages: Story = {
  args: { total: 50, page: 25 },
};

export const FewPages: Story = {
  args: { total: 3 },
};

export const WideSiblings: Story = {
  args: { total: 20, page: 10, siblingCount: 2, boundaryCount: 2 },
};