"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var VirtualList_stories_exports = {};
__export(VirtualList_stories_exports, {
  Default: () => Default,
  TestVirtualList: () => TestVirtualList,
  WithCustomLastRow: () => WithCustomLastRow,
  WithPagination: () => WithPagination,
  default: () => VirtualList_stories_default
});
module.exports = __toCommonJS(VirtualList_stories_exports);
var import_react = __toESM(require("react"));
var import_VirtualList = require("./VirtualList");
var import_addon_actions = require("@storybook/addon-actions");
var import_test = require("@storybook/test");
const items = Array.from({ length: 50 }, (_, i) => ({ i }));
const meta = {
  component: import_VirtualList.VirtualList,
  decorators: [
    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "400px" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
  ],
  title: "PreLdls/Components/VirtualList",
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component: "A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering."
      }
    }
  },
  argTypes: {
    gap: { description: "Gap between items in the list.", defaultValue: { summary: 0 } },
    itemHeight: {
      description: "Height of each item in the list."
    },
    overscan: {
      description: "Number of extra items to render outside the visible viewport for smoother scrolling.",
      table: {
        defaultValue: {
          summary: "5"
        }
      }
    },
    LoadingComponent: {
      description: "React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used."
    },
    isLoading: {
      description: "Indicates whether new items are currently being loaded."
    },
    hasNextPage: {
      description: "Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.",
      defaultValue: {
        summary: "false"
      }
    },
    threshold: {
      description: "Number of items to check before the end of the list to trigger loading more items.",
      defaultValue: {
        summary: "5"
      }
    },
    onVisibleItemsScrollEnd: {
      description: "Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list."
    },
    renderItem: {
      description: "Function to render each item in the list. Receives the index of the item as an argument and should return a React node."
    },
    scrollToTop: {
      description: "When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position."
    }
  },
  args: {
    gap: 0,
    itemHeight: 64,
    LoadingComponent: void 0,
    isLoading: false,
    overscan: 5,
    hasNextPage: false,
    threshold: 5,
    onVisibleItemsScrollEnd: () => {
    },
    items,
    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i),
    scrollToTop: false
  }
};
var VirtualList_stories_default = meta;
const Default = {
  args: {
    itemHeight: 50,
    overscan: 5,
    items,
    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightblue", border: "1px solid black" } }, "Item ", i)
  }
};
const WithCustomLastRow = {
  render: (args) => {
    const items2 = Array.from({ length: 5 }, (_, i) => i + 1);
    return /* @__PURE__ */ import_react.default.createElement(
      import_VirtualList.VirtualList,
      {
        ...args,
        items: items2,
        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", item),
        bottomComponent: /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightcoral" } }, "End of List")
      }
    );
  }
};
const WithPagination = {
  render: (args) => {
    const [items2, setItems] = (0, import_react.useState)(Array.from({ length: 50 }, (_, i) => i));
    const [isFetching, setIsFetching] = (0, import_react.useState)(false);
    const handleFetchNextPage = async () => {
      (0, import_addon_actions.action)("fetchNextPage")();
      if (isFetching)
        return;
      setIsFetching(true);
      await new Promise((resolve) => setTimeout(resolve, 1e3));
      setItems((prev) => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);
      setIsFetching(false);
    };
    return /* @__PURE__ */ import_react.default.createElement(
      import_VirtualList.VirtualList,
      {
        ...args,
        isLoading: isFetching,
        onVisibleItemsScrollEnd: handleFetchNextPage,
        hasNextPage: true,
        items: items2,
        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", item)
      }
    );
  },
  args: {
    itemHeight: 50,
    overscan: 5,
    hasNextPage: true,
    isLoading: false
  }
};
const TestVirtualList = {
  play: async ({ canvasElement }) => {
    const canvas = (0, import_test.within)(canvasElement);
    const visibleItems = canvas.getAllByText(/Item #/i);
    const firstVisibleItem = visibleItems[0];
    const lastVisibleItem = visibleItems[visibleItems.length - 1];
    await (0, import_test.expect)(visibleItems.length).toBeLessThanOrEqual(12);
    await (0, import_test.expect)(firstVisibleItem).toBeInTheDocument();
    await import_test.userEvent.pointer([
      { keys: "[TouchA>]", target: lastVisibleItem },
      { target: firstVisibleItem },
      { keys: "[/TouchA]" }
    ]);
    await (0, import_test.waitFor)(() => (0, import_test.expect)(firstVisibleItem).not.toBeInTheDocument());
  }
};
//# sourceMappingURL=VirtualList.stories.js.map
