import { Avatar, Badge, List, type Select } from '@based/ui'
import { useToast } from '@based/ui'
import {
  randCountry,
  randEmail,
  randFullName,
  randStatus,
  randUuid,
} from '@ngneat/falso'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'List',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: List,
  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: 'Default',
    type: 'component',
    description: 'Regular list with collapsible items and item actions.',
    style: {
      size: '300px',
      frame: false,
    },
    render: () => {
      const images = [
        'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg',
        'https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg',
        'https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg',
        'https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg',
        'https://images.pexels.com/photos/775091/pexels-photo-775091.jpeg',
      ]

      function getRandomNumber(): number {
        return Math.floor(Math.random() * 5)
      }

      const TEST_DATA = Array.from({ length: 50 }).map(() => ({
        id: randUuid(),
        name: randFullName(),
        email: randEmail(),
        country: randCountry(),
        status: randStatus(),
        image: images[getRandomNumber()],
      }))

      const toast = useToast()

      return (
        <List
          data={TEST_DATA}
          fields={{
            image: {
              key: 'image',
              render: ({ image }) => <Avatar src={image} />,
            },
            name: {
              key: 'name',
            },
            email: {
              key: 'email',
            },
            country: {
              key: 'country',
            },
            status: {
              key: 'status',
              render: ({ status }) => <Badge>{status}</Badge>,
            },
          }}
          onItemClick={(item) => {
            toast(`Clicked on ${item.name}`)
          }}
        />
      )
    },
  },
  {
    name: 'With Title',
    type: 'component',
    description: 'List with a title.',
    style: {
      size: '300px',
      frame: false,
    },
    render: () => {
      const images = [
        'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg',
        'https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg',
        'https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg',
        'https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg',
        'https://images.pexels.com/photos/775091/pexels-photo-775091.jpeg',
      ]

      function getRandomNumber(): number {
        return Math.floor(Math.random() * 5)
      }

      const TEST_DATA = Array.from({ length: 50 }).map(() => ({
        id: randUuid(),
        name: randFullName(),
        email: randEmail(),
        country: randCountry(),
        status: randStatus(),
        image: images[getRandomNumber()],
      }))

      const toast = useToast()

      return (
        <List
          title="Editors"
          data={TEST_DATA}
          fields={{
            image: {
              key: 'image',
              render: ({ image }) => <Avatar src={image} />,
            },
            name: {
              key: 'name',
            },
            email: {
              key: 'email',
            },
            country: {
              key: 'country',
            },
            status: {
              key: 'status',
              render: ({ status }) => <Badge>{status}</Badge>,
            },
          }}
          onItemClick={(item) => {
            toast(`Clicked on ${item.name}`)
          }}
        />
      )
    },
  },
  {
    name: 'Collapsible',
    type: 'component',
    description: 'List with a title and collapsible items.',
    style: {
      size: '300px',
      frame: false,
    },
    render: () => {
      const images = [
        'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg',
        'https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg',
        'https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg',
        'https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg',
        'https://images.pexels.com/photos/775091/pexels-photo-775091.jpeg',
      ]

      function getRandomNumber(): number {
        return Math.floor(Math.random() * 5)
      }

      const TEST_DATA = Array.from({ length: 50 }).map(() => ({
        id: randUuid(),
        name: randFullName(),
        email: randEmail(),
        country: randCountry(),
        status: randStatus(),
        image: images[getRandomNumber()],
      }))

      const toast = useToast()

      return (
        <List
          title="Editors"
          collapsible
          data={TEST_DATA}
          fields={{
            image: {
              key: 'image',
              render: ({ image }) => <Avatar src={image} />,
            },
            name: {
              key: 'name',
            },
            email: {
              key: 'email',
            },
            country: {
              key: 'country',
            },
            status: {
              key: 'status',
              render: ({ status }) => <Badge>{status}</Badge>,
            },
          }}
          onItemClick={(item) => {
            toast(`Clicked on ${item.name}`)
          }}
        />
      )
    },
  },
  {
    name: 'Selectable',
    type: 'component',
    description: 'List with selectable items.',
    style: {
      size: '300px',
      frame: false,
    },
    render: () => {
      const images = [
        'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg',
        'https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg',
        'https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg',
        'https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg',
        'https://images.pexels.com/photos/775091/pexels-photo-775091.jpeg',
      ]

      function getRandomNumber(): number {
        return Math.floor(Math.random() * 5)
      }

      const TEST_DATA = Array.from({ length: 50 }).map(() => ({
        id: randUuid(),
        name: randFullName(),
        email: randEmail(),
        country: randCountry(),
        status: randStatus(),
        image: images[getRandomNumber()],
      }))

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

      return (
        <List
          title="Editors"
          data={TEST_DATA}
          select={select}
          onSelectChange={setSelect}
          fields={{
            image: {
              key: 'image',
              render: ({ image }) => <Avatar src={image} />,
            },
            name: {
              key: 'name',
            },
            email: {
              key: 'email',
            },
            country: {
              key: 'country',
            },
            status: {
              key: 'status',
              render: ({ status }) => <Badge>{status}</Badge>,
            },
          }}
          onItemClick={(item) => {
            toast(`Clicked on ${item.name}`)
          }}
        />
      )
    },
  },
]
