import { Meta, StoryFn } from "@storybook/react";
import range from "lodash/range";

import { MockQueryClientProvider } from "../mocks";

import { DataTable, DataTableProps } from "./DataTable";
import { useDataTable } from "./use-data-table";
import { MockUser, mockUser } from "../mocks";
import { PaginatedRequest, PaginatedResponse } from "../types";

const NUM_PAGES = 3;

export default {
  title: "Shared/Data Table",
  component: DataTable,
  decorators: [
    (Story) => (
      <MockQueryClientProvider>
        <Story />
      </MockQueryClientProvider>
    ),
  ],
} as Meta;

const testData = (pageSize: number): MockUser[] =>
  range(pageSize).map(() => mockUser());

const getPaginatedTestData = async ({
  pageIndex,
  pageSize,
}: PaginatedRequest): Promise<PaginatedResponse<MockUser>> => ({
  data: testData(pageSize),
  nextPage: pageIndex + 1,
  pageCount: NUM_PAGES,
});

const Template: StoryFn<DataTableProps<MockUser>> = (args: any) => {
  const dataTableProps = useDataTable<MockUser>({
    queryFn: getPaginatedTestData,
    queryKey: "test",
  });

  return <DataTable<MockUser> {...args} {...dataTableProps} />;
};

export const Default = Template.bind({});
Default.args = {
  title: "Test Data Table",
  headerFields: ["id", "walletAddress", "username"],
};
