import { Grid, VirtualizedGrid } from '@based/ui'
import { randAirportCode, randEmail, randFullName } from '@ngneat/falso'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Grid',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: Grid,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Regular',
    type: 'component',
    description: 'Regular grid displaying data.',
    style: {
      size: '100%',
    },
    render: () => {
      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',
      }))

      const [select, setSelect] = useState(undefined)

      return (
        <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)
              },
            },
          ]}
        />
      )
    },
  },
  {
    name: 'Virtualized',
    type: 'component',
    description: 'Virtualized grid for optimized rendering of large datasets.',
    style: {
      size: '100%',
    },
    render: () => {
      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',
      }))

      const [select, setSelect] = useState(undefined)

      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>
      )
    },
  },
]
