import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useCallback, useState } from "storybook/preview-api";
import Paginations from '@molecules/Paginations/Paginations';
import { PaginationsProps } from '@molecules/Paginations/Paginations';

export default {
  title: 'molecules/Paginations',
  component: Paginations,
  argTypes: {},
} as Meta<typeof Paginations>;

const Template: StoryFn<PaginationsProps> = ({ activeIndex, ...args }) => {
  const [_, updateArgs] = useArgs();
  const [internalValue, setInternalValue] = useState(activeIndex);

  const handleChange = useCallback((newValue: number) => {
    setInternalValue(newValue);
    updateArgs({activeIndex: newValue});
  }, []);

  return (
    <>
      <Paginations {...args} activeIndex={internalValue} onChange={handleChange} />
      <div>activeIndex: {internalValue}</div>
    </>
  );
};

export const _Paginations = Template.bind({});
_Paginations.args = {
  count: 200,
  activeIndex: 0,
  pageSize: 10,
  config: 5,
};