'use client'

import * as React from 'react'
import {
  ColumnDef,
  ColumnFiltersState,
  SortingState,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable
} from '@tanstack/react-table'

import { Button } from '@/components/ui/button'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@/components/ui/table'
import clsx from 'clsx'
import { EyeToggleIcon } from '../icons/EyeToggleIcon'
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react'
import { ef } from '@/lib/helpers/utfNumbers'

const data: Payment[] = [
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'm5gr84i9',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: '3u1reuv4',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'derv1ws0',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: false,
    date: 14040401
  },
  {
    id: '5kma53ae',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  },
  {
    id: 'bhqecj4p',
    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
    status: true,
    date: 14040401
  }
]

export type Payment = {
  id: string
  type: string
  // status: "pending" | "processing" | "success" | "failed"
  status: boolean
  date: number
}

export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: 'id',
    header: () => <div className='text-right pr-6'>شماره</div>,
    cell: ({ row }) => (
      <div className='capitalize text-right pr-6'>{row.getValue('id')}</div>
    )
  },
  {
    accessorKey: 'type',
    header: () => <div className='text-center'>نوع تراکنش</div>,
    cell: ({ row }) => <div className='capitalize'>{row.getValue('type')}</div>
  },
  {
    accessorKey: 'date',
    header: () => <div className='text-center'>تاریخ</div>,
    cell: ({ row }) => {
      const date = parseFloat(row.getValue('date'))

      // Format the amount as a dollar amount
      //   const formatted = new Intl.NumberFormat("en-US", {
      //     style: "currency",
      //     currency: "USD",
      //   }).format(amount)
      // TODO: convert to jalali

      return <div className='text-center'>{date}</div>
    }
  },
  {
    accessorKey: 'status',
    header: () => <div className='text-center'>وضعیت</div>,
    cell: ({ row }) => {
      const status = Boolean(row.getValue('status'))

      const str = status ? 'پاسخ داده شده' : 'پاسخ داده نشده'

      return (
        <div className='text-right flex items-center justify-center gap-x-2'>
          <span
            className={clsx(
              'size-2 rounded-full',
              status ? 'bg-[#00BA4B]' : 'bg-transparent border border-primary'
            )}
          ></span>
          {str}
        </div>
      )
    }
  },
  {
    id: 'actions',
    enableHiding: false,
    cell: ({ row }) => {
      const status = Boolean(row.getValue('status'))

      return (
        <>
          <EyeToggleIcon className='ml-6 place-self-end' slash={status} />
        </>
      )
    }
  }
]

export function DataTableDemo () {
  const [sorting, setSorting] = React.useState<SortingState>([])
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({})
  const [rowSelection, setRowSelection] = React.useState({})

  const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection
    },
    initialState: {
      pagination: {
        pageSize: 8
      }
    }
  })

  return (
    <div className='w-full'>
      <div className='rounded-3xl min-h-[507px] w-full'>
        <Table className='w-[727px] md:w-full'>
          <TableHeader>
            {table.getHeaderGroups().map(headerGroup => (
              <TableRow
                className='dark:border-neutral-400 border-[#EAEDF5] h-14'
                key={headerGroup.id}
              >
                {headerGroup.headers.map(header => {
                  return (
                    <TableHead
                      key={header.id}
                      className='font-light text-xs text-disabled-text text-center'
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  )
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map(row => (
                <TableRow
                  key={row.id}
                  className='text-center w-full border-b-[#EAEDF5] dark:border-b-background text-xs odd:bg-[#E9EBF433] bg-border dark:odd:bg-background/80 even:bg-container border-0 border-b! h-14 border-r-4! border-r-transparent active:border-r-primary dark:active:border-r-foreground'
                >
                  {row.getVisibleCells().map(cell => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className='h-24 text-center'
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className='flex items-center justify-end space-x-2 pt-4 px-7 pb-11 select-none'>
        <div className='flex-1 text-sm text-disabled-text'>
          نمایش:{' '}
          <span className='text-primary dark:text-foreground'>
            {ef(table.getRowModel().rows.length)}
          </span>{' '}
          از {ef(table.getFilteredRowModel().rows.length)}
        </div>
        <div className='space-x-2 justify-center flex'>
          <Button
            variant='ghost'
            size='sm'
            className='size-6'
            onClick={() => table.previousPage()}
            hidden={!table.getCanPreviousPage()}
          >
            <ArrowRight2 size={12} className='stroke-[#A8ABBF]' />
          </Button>
          <Button
            variant='secondary'
            size='sm'
            className='dark:bg-disabled bg-[#EAECF5] text-xs size-6'
            onClick={() => table.previousPage()}
            hidden={!table.getCanPreviousPage()}
          >
            {ef(table.getState().pagination.pageIndex)}
          </Button>
          <Button
            variant='default'
            className='text-white dark:text-foreground text-xs size-6'
            size='sm'
            hidden={!table.getCanPreviousPage() && !table.getCanNextPage()}
          >
            {ef(table.getState().pagination.pageIndex + 1)}
          </Button>
          <Button
            variant='secondary'
            size='sm'
            className='dark:bg-disabled bg-[#EAECF5] text-xs size-6'
            onClick={() => table.nextPage()}
            hidden={!table.getCanNextPage()}
          >
            {ef(table.getState().pagination.pageIndex + 2)}
          </Button>

          <Button
            variant='ghost'
            size='sm'
            className='size-6'
            onClick={() => table.nextPage()}
            hidden={!table.getCanNextPage()}
          >
            <ArrowLeft2 size={12} className='stroke-[#A8ABBF]' />
          </Button>
        </div>
      </div>
    </div>
  )
}
