import { Avatar, Badge, Media, Table, Text, useToast } from '@based/ui'
import {
  randAirportCode,
  randEmail,
  randFullName,
  randImg,
} from '@ngneat/falso'
import { useCallback, useMemo, useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Table',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: Table,
  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: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: 'medium',
    },
    render: () => {
      const myData = [
        {
          id: 19,
          song: 'Hurricane',
          artist: 'Eden Golan',
          img: 'https://static-cdn.toi-media.com/www/uploads/2024/05/AP24129554974867.jpg',
          country: 'Israel',
          state: false,
        },
        {
          id: 20,
          song: 'La noia',
          artist: 'Angelina Mango',
          img: 'https://pbs.twimg.com/media/GNEY-mWX0AE4O_y.jpg:large',
          country: 'Italy',
          state: true,
        },
        {
          id: 21,
          song: 'Hollow',
          artist: 'Dons',
          img: 'https://eurovoix.com/wp-content/uploads/2024/04/30-05.24-Corinne-Cumming-EBU-5883-Enhanced-NR.jpg',
          country: 'Latvia',
          state: false,
        },
        {
          id: 22,
          song: 'Luktelk',
          artist: 'Silvester Belt',
          img: 'https://madeinvilnius.lt/wp-content/uploads/2024/05/110524_Sarah-Louise-Bennett_EBU_32881.jpg',
          country: 'Lithuania',
          state: true,
        },
        {
          id: 23,
          song: 'Fighter',
          artist: 'Tali',
          img: 'https://static-cdn.toi-media.com/www/uploads/2024/01/Tali-Fighter-e1706429367444.jpeg',
          country: 'Luxembourg',
          state: true,
        },
        {
          id: 24,
          song: 'Loop',
          artist: 'Sarah Bonnici',
          img: 'https://www.esc-plus.com/wp-content/uploads/2024/04/sarah_bonnici_malta_2024.jpg',
          country: 'Malta',
          state: true,
        },
        {
          id: 25,
          song: 'In The Middle',
          artist: 'Natalia Barbu',
          img: 'https://wiwibloggs.com/wp-content/uploads/2024/04/Natalia-Barbu-Jan-2024.jpg',
          country: 'Moldova',
          state: true,
        },
        {
          id: 26,
          song: 'Europapa',
          artist: 'Joost Klein',
          img: 'https://media.cnn.com/api/v1/images/stellar/prod/2024-05-08t203721z-1934291779-rc2km7aow6o9-rtrmadp-3-music-eurovision-rehearsal-semi-final-2.JPG?c=16x9&q=h_833,w_1480,c_fill',
          country: 'Netherlands',
          state: false,
        },
        {
          id: 27,
          song: 'Ulveham',
          artist: 'Gåte',
          img: 'https://www.esc-plus.com/wp-content/uploads/2024/04/gate_norway_2024.jpg',
          country: 'Norway',
          state: true,
        },
        {
          id: 28,
          song: 'The Tower',
          artist: 'Luna',
          img: 'https://www.esc-plus.com/wp-content/uploads/2024/02/luna.jpg',
          country: 'Poland',
          state: true,
        },
        {
          id: 29,
          song: 'Grito',
          artist: 'iolanda',
          img: 'https://eurovision.tv/sites/default/files/styles/og_image/public/media/image/2024-05/01-05.24%20Corinne%20Cumming%20-%20EBU%208458.jpg?h=dc6ec54d&itok=2r0cbgoN',
          country: 'Portugal',
          state: true,
        },
        {
          id: 30,
          song: '11:11',
          artist: 'MEGARA',
          img: 'https://static.wikia.nocookie.net/eurosong-contest/images/1/1e/Megara_1.png/revision/latest/scale-to-width-down/1200?cb=20240227025250',
          country: 'San Marino',
          state: false,
        },
        {
          id: 31,
          song: 'Ramonda',
          artist: 'TEYA DORA',
          img: 'https://wiwibloggs.com/wp-content/uploads/2024/02/Teya-Dora-2023.jpg',
          country: 'Serbia',
          state: false,
        },
        {
          id: 32,
          song: 'Veronika',
          artist: 'Raiven',
          img: 'https://eurovision.tv/sites/default/files/styles/og_image/public/media/image/2024-05/01-05.24%20Corinne%20Cumming%20-%20EBU%208104.jpg?h=688663d9&itok=OAN8A6yk',
          country: 'Slovenia',
          state: true,
        },
        {
          id: 33,
          song: 'Zorra',
          artist: 'Nebulossa',
          img: 'https://www.esc-plus.com/wp-content/uploads/2024/04/nebulossa_spain_2024-850x478.jpg',
          country: 'Spain',
          state: true,
        },
        {
          id: 34,
          song: 'Unforgettable',
          artist: 'Marcus & Martinus',
          img: 'https://www.eurovisionuniverse.com/wp-content/uploads/2024/03/Marcus-Martinus2.jpg',
          country: 'Sweden',
          state: true,
        },
        {
          id: 35,
          song: 'The Code',
          artist: 'Nemo',
          img: 'https://static.independent.co.uk/2024/05/09/12/newFile-3.jpg',
          country: 'Switzerland',
          state: true,
        },
        {
          id: 36,
          song: 'Teresa & Maria',
          artist: 'alyona alyona & Jerry Heil',
          img: 'https://i0.wp.com/escxtra.com/wp-content/uploads/jerry-heil-alyona.jpg?fit=1200%2C800&ssl=1',
          country: 'Ukraine',
          state: false,
        },
        {
          id: 37,
          song: 'Dizzy',
          artist: 'Olly Alexander',
          img: 'https://www.esc-plus.com/wp-content/uploads/2023/12/Olly_Alexander_UK_2024.jpg',
          country: 'United Kingdom',
          state: false,
        },
      ]

      const [first, setFirst] = useState(0)
      const [last, setLast] = useState(0)
      const [sort, setSort] = useState(undefined)
      const [select, setSelect] = useState(undefined)
      const toast = useToast()

      const fields = useMemo(
        () => ({
          id: {
            key: 'id',
            table: { title: 'ID' },
            render: ({ id }: any) => <Badge leadIcon="number">{id}</Badge>,
          },
          song: {
            key: 'song',
            table: { title: 'Song' },
            render: ({ song }: any) => <Text>{song}</Text>,
          },
          artist: {
            key: 'artist',
            table: { title: 'Artist' },
            render: ({ artist, img }: any) => {
              return (
                <div
                  style={{
                    display: 'flex',
                    gap: 16,
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}
                >
                  <Avatar src={img} />
                  <Text>{artist}</Text>
                </div>
              )
            },
          },
          country: {
            key: 'country',
            table: { title: 'Country' },
            render: ({ country }: any) => <Text>{country}</Text>,
          },
          state: {
            key: 'state',
            table: { title: 'State' },
            render: ({ state }: any) => (
              <Badge leadIcon={state ? 'select' : 'time'}>
                {state ? 'Performed' : 'Schedule'}
              </Badge>
            ),
          },
        }),
        [],
      )

      const itemActions = useMemo(
        () => [
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item: any) => {
              console.log('delete', item.id)
            },
          },
        ],
        [],
      )

      const handleScroll = useCallback((first: any, last: any) => {
        setFirst(first)
        setLast(last)
      }, [])

      const onItemClick = useCallback(
        (item: any) => {
          toast(`clicked item ${item.id}`)
        },
        [toast],
      )

      return (
        <Table
          fields={fields}
          data={myData.slice(first, last)}
          total={myData.length}
          sort={sort}
          onSortChange={setSort}
          select={select}
          onSelectChange={setSelect}
          onScroll={handleScroll}
          onItemClick={onItemClick}
          itemActions={itemActions}
          layout="showAllColumns"
        />
      )
    },
  },
]
