import { FormProvider, useForm } from 'react-hook-form';

import { type Meta, type StoryObj } from '@storybook/react-vite';

import FormPagination from './form';
import Pagination from '.';

const meta: Meta<typeof Pagination> = {
  component: Pagination,
  title: 'Design System/Pagination',
  tags: ['autodocs'],
  argTypes: {
    type: {
      control: 'radio',
      options: ['basic', 'changer'],
      table: { defaultValue: { summary: 'changer' } },
    },
    loading: { control: 'boolean' },
    disabled: { control: 'boolean' },
    page: { control: 'number' },
    totalPages: { control: 'number' },
    limit: { control: 'number' },
    limitOptions: { control: false },
    onChangePage: { control: false },
    onChangeLimit: { control: false },
    sx: { control: false },
  },
  args: {
    page: 1,
    totalPages: 10,
    limit: 10,
    limitOptions: [10, 20, 30],
  },
};

export default meta;

type Story = StoryObj<typeof Pagination>;

export const Default: Story = {
  args: {},
};

export const Basic: Story = {
  args: {
    type: 'basic',
  },
};

export const Loading: Story = {
  args: {
    loading: true,
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

export const CustomSx: Story = {
  args: {
    sx: {
      border: 'none',
      p: 0,
    },
  },
};

export const FormPaginationStory: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        pagination: {
          page: 1,
          limit: 10,
        },
      },
    });
    return (
      <FormProvider {...form}>
        <FormPagination
          name="pagination"
          inputProps={{
            totalPages: 10,
          }}
        />
      </FormProvider>
    );
  },
};