// @ts-nocheck
import { useState } from 'react'
import { List } from './index.js'
import { randEmail, randFullName, randStatus, randUuid } from '@ngneat/falso'
import { Select } from '../../utils/common.js'
import { useToast } from '../Toast/index.js'

const TEST_DATA = Array.from({ length: 50 }).map((_, index) => ({
  id: randUuid(),
  name: randFullName(),
  email: randEmail(),
  email2: randEmail(),
  email3: randEmail(),
  status: randStatus(),
}))

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

  return (
    <div style={{ height: '100svh' }}>
      <List
        data={TEST_DATA}
        select={select}
        onSelectChange={setSelect}
        collapsible
        fields={[
          {
            key: 'name',
          },
          {
            key: 'email',
          },
          {
            key: 'email2',
          },
          {
            key: 'email3',
          },
          {
            key: 'status',
            type: 'badge',
          },
        ]}
        onItemClick={(item) => {
          toast(`clicked item ${item.id}`)
        }}
        itemActions={[
          {
            label: 'Open in new tab',
            icon: 'external',
            onClick: (item) => toast(`open in new tab: ${item.id}`),
          },
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item) => toast(`delete: ${item.id}`),
          },
        ]}
      />
    </div>
  )
}

export const FixedHeight = () => {
  const toast = useToast()
  const [select, setSelect] = useState<Select>()

  return (
    <div style={{ padding: 32, height: 250 }}>
      <List
        data={TEST_DATA}
        select={select}
        onSelectChange={setSelect}
        fields={[
          {
            key: 'name',
          },
          {
            key: 'email',
          },
          {
            key: 'email2',
          },
          {
            key: 'email3',
          },
          {
            key: 'status',
            type: 'badge',
          },
        ]}
        onItemClick={(item) => {
          toast(`clicked item ${item.id}`)
        }}
        itemActions={[
          {
            label: 'Open in new tab',
            icon: 'external',
            onClick: (item) => toast(`open in new tab: ${item.id}`),
          },
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item) => toast(`delete: ${item.id}`),
          },
        ]}
      />
    </div>
  )
}

export const WithTitle = () => {
  const toast = useToast()
  const [select, setSelect] = useState<Select>()

  return (
    <div style={{ height: '100svh' }}>
      <List
        title="Members"
        data={TEST_DATA}
        select={select}
        onSelectChange={setSelect}
        collapsible
        fields={[
          {
            key: 'name',
          },
          {
            key: 'email',
          },
          {
            key: 'status',
            type: 'badge',
          },
        ]}
        onItemClick={(item) => {
          toast(`clicked item ${item.id}`)
        }}
        itemActions={[
          {
            label: 'Open in new tab',
            icon: 'external',
            onClick: (item) => toast(`open in new tab: ${item.id}`),
          },
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item) => toast(`delete: ${item.id}`),
          },
        ]}
      />
    </div>
  )
}
