// @ts-nocheck
import { useState } from 'react'
import { Grid, VirtualizedGrid } from './index.js'
import { randAirportCode, randEmail, randFullName } from '@ngneat/falso'
import { Select } from '../../utils/common.js'

const TEST_DATA = Array.from({ length: 250 }).map((_, index) => ({
  id: index,
  name: randFullName(),
  email: randEmail(),
  airport: randAirportCode(),
  image:
    'https://files-production-saulx-based-ui-prod-en-dlsv-p8x0.based.dev/fi4da0cfae/a8e819ce-abe0-4e8e-8a62-63251cbfc614-0a5ddc09-3542-4d07-958f-44806cdba1ae-3c23619d-e3f6-4f15-8b75-6134065360b1.png',
}))

export const Regular = () => {
  const [select, setSelect] = useState<Select>()

  return (
    <div style={{ height: '100svh' }}>
      <Grid
        data={TEST_DATA}
        select={select}
        onSelectChange={setSelect}
        fields={[
          {
            key: 'image',
            type: 'media',
          },
          {
            key: 'name',
          },
          {
            key: 'email',
          },
          {
            key: 'airport',
            type: 'badge',
          },
        ]}
        itemActions={[
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item) => {
              console.log('delete', item.id)
            },
          },
        ]}
      />
    </div>
  )
}

export const Virtualized = () => {
  const [select, setSelect] = useState<Select>()

  return (
    <div style={{ height: '100svh' }}>
      <VirtualizedGrid
        data={TEST_DATA}
        select={select}
        onSelectChange={setSelect}
        fields={[
          {
            key: 'image',
            type: 'media',
          },
          {
            key: 'name',
          },
          {
            key: 'email',
          },
          {
            key: 'airport',
            type: 'badge',
          },
        ]}
        itemActions={[
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item) => {
              console.log('delete', item.id)
            },
          },
        ]}
      />
    </div>
  )
}
