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

import { DocsTemplate } from '../../../.storybook'
import { Virtual } from './Virtual'
import ScrollingContainer from '../ScrollingContainer/ScrollingContainer'
import { SelectDisplayRow } from '../Selects/SelectDisplay/SelectDisplay'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof Virtual> = {
  title: 'Components/Virtual',
  component: Virtual,
  parameters: {
    docs: {
      page: () => <DocsTemplate />,
    },
  },
}
export default meta

type Story = StoryObj<typeof Virtual>

const Template: Story = {
  render: ({ ...args }) => (
    <Virtual count={args.count}>
      {({ virtualizer, virtualizedParentRef }) => (
        <div
          style={{ width: 150, overflow: 'hidden' }}
          className='rounded-sm border border-medium-purple'
        >
          <ScrollingContainer
            ref={virtualizedParentRef as React.RefObject<HTMLDivElement>}
          >
            <Virtual.List virtualizer={virtualizer}>
              {({ index }) => (
                <SelectDisplayRow
                  option={{
                    name: `person-${index + 1}`,
                    label: `Person ${index + 1}`,
                  }}
                  callout={() =>
                    toast({ message: 'Person clicked', type: 'info' })
                  }
                />
              )}
            </Virtual.List>
          </ScrollingContainer>
        </div>
      )}
    </Virtual>
  ),
}

export const Basic: Story = {
  ...Template,
  args: {
    count: 1000,
  },
}