import { Virtualizer, useVirtualizer } from "@tanstack/react-virtual";
import React, { useRef } from "react";

type VirtualListProps<T> = {
  list: T[];
  renderItem: (props: { item: T }) => JSX.Element;
  getItemHeight: (item: T) => number;
  onChange?: (instance: Virtualizer<HTMLDivElement, Element>) => void;
};

const VirtualList = <T,>({ list, renderItem, getItemHeight }: VirtualListProps<T>) => {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    debug: false,
    count: list.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (index) => getItemHeight(list[index]),
    onChange: (instance) => {
      console.log("instance", instance);
    },
  });

  return (
    <div
      ref={parentRef}
      style={{
        height: "calc(100vh - 115px)",
        overflow: "auto",
      }}
    >
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          width: "100%",
          position: "relative",
        }}
      >
        {virtualizer.getVirtualItems().map((virtualItem) => (
          <div
            key={virtualItem.key}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            {renderItem({ item: list[virtualItem.index] })}
          </div>
        ))}
      </div>
    </div>
  );
};

export default VirtualList;

    const getItemHeight = useMemo(
      () => {
        // This function returns another function that calculates the item height
        return (item: any): number => {
          if (item.discriminant === ListItemDiscriminants.ITEM_CARD) {
            const aux = item as ItemCard;
            // Example height calculation, adjust based on your item structure and content
            return 144 + (aux.subfamilyName !== undefined && aux.rfidLocations?.includes("STORE") ? 20 : 0);
          } else {
            // Assuming headers have a fixed height
            return 34;
          }
        };
      },
      [
        /* Dependencies that affect item heights, e.g., waveFilters */
      ],
    );

    const listState = useMemo(() => {
      const list =
        classifyBy === "units"
          ? generateItemList(itemsByLocation, waveFilters, checked, intl, true, parsedLocations)
          : generateItemList(itemsByOrder, waveFilters, checked, intl, true, undefined, itemsByOrderKeyList);

      if (!list) {
        return null;
      }

      return <VirtualList list={list} renderItem={renderItem} getItemHeight={getItemHeight} />;
    }, [classifyBy, unitsList, ordersList, locationHeaderSticky, subHeaderSticky, window.innerHeight]);