import { type ReactNode, useRef } from 'react';

import { clsx } from 'clsx';

import * as styles from '#/components/Dialog/Popup.css';
import { List as BaseList, type ListRenderItem } from '#/components/List/List';

export type { ListRenderItem, ListRenderItemInfo } from '#/components/List/List';

export type ListProps<ItemT> = {
	data: readonly ItemT[];
	keyExtractor: (item: ItemT, index: number) => string;
	/** shown in place of the rows when `data` is empty, below any header. */
	ListEmptyComponent?: ReactNode;
	/** shown after non-empty data; the place for a pagination spinner or retry. */
	ListFooterComponent?: ReactNode;
	/** shown before items, including when `data` is empty. */
	ListHeaderComponent?: ReactNode;
	className?: string;
	/** enables virtualization with this estimated row height. */
	estimateHeight?: number;
	onEndReached?: () => void;
	renderItem: ListRenderItem<ItemT>;
};

/**
 * renders a list in a body-scroll popup.
 *
 * @param props list content and pagination options
 * @returns the list scroll region
 */
export function List<ItemT>({
	data,
	keyExtractor,
	ListEmptyComponent,
	ListFooterComponent,
	ListHeaderComponent,
	className,
	estimateHeight,
	onEndReached,
	renderItem,
}: ListProps<ItemT>) {
	const scrollRef = useRef<HTMLDivElement>(null);

	const isEmpty = data.length === 0;

	return (
		<div ref={scrollRef} className={clsx(styles.body, className)}>
			<BaseList
				data={data}
				estimateHeight={estimateHeight}
				keyExtractor={keyExtractor}
				ListEmptyComponent={ListEmptyComponent}
				ListFooterComponent={!isEmpty && ListFooterComponent}
				ListHeaderComponent={ListHeaderComponent}
				onEndReached={onEndReached}
				onEndReachedThreshold={2}
				renderItem={renderItem}
				scrollRoot={scrollRef}
			/>
		</div>
	);
}