import type { Meta, StoryObj } from '@storybook/react-vite';

import { VirtualList } from './virtual-list';
import { Avatar, AvatarFallback } from '../avatar/avatar';

type Row = { id: number; name: string; email: string };

const rows: Row[] = Array.from({ length: 10000 }, (_, index) => ({
  id: index,
  name: `Person ${index + 1}`,
  email: `person${index + 1}@example.com`,
}));

const meta = {
  title: 'Components/VirtualList',
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Windowed list: only the rows in view are mounted. Reach for it past a few hundred rows, where mounting everything makes scrolling stutter. Below that a plain `map` is simpler and behaves better with find-in-page, which cannot see unmounted rows. Rows must all be the same `itemHeight`.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta;

export default meta;
type Story = StoryObj<typeof meta>;

/** Ten thousand rows; the DOM holds roughly a dozen at a time. */
export const TenThousandRows: Story = {
  render: () => (
    <div className="w-80">
      <VirtualList data={rows} height={320} itemHeight={40} itemKey="id">
        {(row) => (
          <div className="flex h-10 items-center gap-2 border-b px-3 text-sm last:border-b-0">
            <span className="flex-1 truncate">{row.name}</span>
            <span className="text-xs text-muted-foreground">#{row.id}</span>
          </div>
        )}
      </VirtualList>
    </div>
  ),
};

export const RichRows: Story = {
  render: () => (
    <div className="w-96">
      <VirtualList data={rows.slice(0, 2000)} height={360} itemHeight={56} itemKey="id">
        {(row) => (
          <div className="flex h-14 items-center gap-3 border-b px-3 last:border-b-0">
            <Avatar size="sm">
              <AvatarFallback>{row.name.slice(7, 9)}</AvatarFallback>
            </Avatar>
            <div className="min-w-0 flex-1">
              <div className="truncate text-sm font-medium">{row.name}</div>
              <div className="truncate text-xs text-muted-foreground">{row.email}</div>
            </div>
          </div>
        )}
      </VirtualList>
    </div>
  ),
};