worklenz/worklenz-frontend/src/components/enhanced-kanban/VirtualizedTaskList.tsx

import React, { useMemo, useCallback } from 'react';
import { FixedSizeList as List } from 'react-window';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
import EnhancedKanbanTaskCard from './EnhancedKanbanTaskCard';
import './VirtualizedTaskList.css';

interface VirtualizedTaskListProps {
  tasks: IProjectTask[];
  height: number;
  itemHeight?: number;
  activeTaskId?: string | null;
  overId?: string | null;
  onTaskRender?: (task: IProjectTask, index: number) => void;
}

const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
  tasks,
  height,
  itemHeight = 80,
  activeTaskId,
  overId,
  onTaskRender,
}) => {
  // Memoize task data to prevent unnecessary re-renders
  const taskData = useMemo(() => ({
    tasks,
    activeTaskId,
    overId,
    onTaskRender,
  }), [tasks, activeTaskId, overId, onTaskRender]);

  // Row renderer for virtualized list
  const Row = useCallback(({ index, style }: { index: number; style: React.CSSProperties }) => {
    const task = tasks[index];
    if (!task) return null;

    // Call onTaskRender callback if provided
    onTaskRender?.(task, index);

    return (
      <div style={style} className="virtualized-task-row">
        <EnhancedKanbanTaskCard
          task={task}
          isActive={task.id === activeTaskId}
          isDropTarget={overId === task.id}
        />
      </div>
    );
  }, [tasks, activeTaskId, overId, onTaskRender]);

  // Memoize the list component to prevent unnecessary re-renders
  const VirtualizedList = useMemo(() => (
    <List
      height={height}
      itemCount={tasks.length}
      itemSize={itemHeight}
      itemData={taskData}
      overscanCount={5} // Render 5 extra items for smooth scrolling
      className="virtualized-task-list"
    >
      {Row}
    </List>
  ), [height, tasks.length, itemHeight, taskData, Row]);

  if (tasks.length === 0) {
    return (
      <div className="virtualized-empty-state" style={{ height }}>
        <div className="empty-message">No tasks in this group</div>
      </div>
    );
  }

  return VirtualizedList;
};

export default React.memo(VirtualizedTaskList);