import RadixTooltip from '@/Components/Inputs/RadixTooltip'
import Table from '@/Components/Tables/Table'
import { StarIcon } from '@radix-ui/react-icons'
import React, { type ReactElement } from 'react'

interface IRow {
  id: number
  label: string
  description: string
}
const TypedTableExample = (): ReactElement => {
  const exampleData = Array.from({ length: 50 }, (d, i) => ({
    id: i,
    label: `Row #${i}`,
    description: `This is the description for row ${i}`,
    fullSpanContent: i === 3 ? 'Full span here' : undefined,
    fullSpanClassName: i === 3 ? 'p-4 bg-slate-600 text-white' : undefined
  }))

  return <Table<IRow>
    data={exampleData}
    columns={[
      {
        id: 'id',
        label: 'ID',
        accessor: (row) => <><StarIcon className='inline mr-2 -mt-1' />{row.id}</>
      },
      {
        id: 'label',
        label: 'Label'
      },
      {
        id: 'description',
        label: 'Description'
      }
    ]}
  />
}

const TableExample = (): ReactElement => {
  const exampleData = Array.from({ length: 50 }, (d, i) => ({
    'First Column': `This is the first column value for row ${i}`,
    'Second Column': `This is the second column value for row ${i}`,
    'Third Column': `This is the third column value for row ${i}`,
    'Fourth Column': `This is the fourth column value for row ${i}`,
    'Fifth Column': `This is the fifth column value for row ${i}`,
    'Sixth Column': `This is the sixth column value for row ${i}`
  }))

  return (
    <div className='absolute top-0 bottom-0 left-0 right-0 p-20 flex flex-col justify-items-center gap-20'>
      <div className='flex-1 overflow-y-auto'>
        <Table
          data={exampleData}
          columns={Object.keys(exampleData[0]).map(d => {
            return {
              id: d,
              label: d,
              accessor: (row) => {
                return <RadixTooltip content={row[d]}><div className='max-w-sm truncate'>{row[d]}</div></RadixTooltip>
              }
            }
          })}
        />
      </div>
      <div className='flex-1 overflow-y-auto'>
        <TypedTableExample />
      </div>
    </div>
  )
}

export default TableExample
