import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons'
import { Box, chakra, Table, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'
import React from 'react'
import { useBlockLayout, useSortBy, useTable } from 'react-table'
import { useSticky } from 'react-table-sticky'
import { useViewport } from '../../../contexts'
import space from '../../../styles/theme/foundations/space'

interface ICustomTableProps {
  // columns: ColumnProps[]
  columns: any
  data: any
}

const CustomTable: React.FunctionComponent<ICustomTableProps> = (props) => {
  const { columns, data } = props
  const { width } = useViewport()
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data },
    useSortBy,
    useBlockLayout,
    useSticky,
  )
  return (
    <Box overflow={{ base: 'auto', md: 'initial' }} w={{ base: `calc(${width}px - ${space.default} * 2)`, md: 'full' }}>
      <Table bg={'rgba(0, 0, 0, 0.3)'} borderRadius={'12px'} {...getTableProps()}>
        <Thead>
          {headerGroups.map((headerGroup, key) => (
            <Tr key={key} {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column: any, key2) => {
                return (
                  <Th
                    key={key2}
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                    color="primary"
                    borderBottomColor="primary"
                    fontFamily={'default'}
                    isNumeric={column.isNumeric}
                    fontSize={'13px'}
                    lineHeight={'13px'}
                  >
                    {column.render('Header')}
                    <chakra.span pl="4">
                      {column.isSorted ? (
                        column.isSortedDesc ? (
                          <TriangleDownIcon aria-label="sorted descending" />
                        ) : (
                          <TriangleUpIcon aria-label="sorted ascending" />
                        )
                      ) : null}
                    </chakra.span>
                  </Th>
                )
              })}
            </Tr>
          ))}
        </Thead>
        <Tbody {...getTableBodyProps()}>
          {rows.map((row, key) => {
            prepareRow(row)

            const isLastRow = data.length - 1 === row.index
            return (
              <Tr key={key} {...row.getRowProps()}>
                {row.cells.map((cell, key2) => (
                  <Td
                    key={key2}
                    borderBottomColor={isLastRow ? 'transparent' : 'primary'}
                    {...cell.getCellProps()}
                    isNumeric={cell.column.isNumeric}
                    fontSize={'14px'}
                    lineHeight={'14px'}
                  >
                    {cell.render('Cell')}
                  </Td>
                ))}
              </Tr>
            )
          })}
        </Tbody>
      </Table>
    </Box>
  )
}

export default CustomTable