import React, { useMemo } from 'react'
import { useTable, useFilters, useGlobalFilter,useSortBy } from 'react-table'
import value from './data.json'
import { COLUMNS } from './Column'
import { GlobalFilter } from './GlobalFilter'
import { ColumnFilter } from './ColumnFilter'
import { Container,Table,Row } from 'reactstrap';


const Basictable = () => {
    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => value, [])

  const defaultColumn = React.useMemo(
    () => ({
      Filter: ColumnFilter
    }),
    []
  )

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    setGlobalFilter
  } = useTable(
    {
      columns,
      data,
      defaultColumn
    },
    useFilters,
    useGlobalFilter,
    useSortBy
    
  )

  const { globalFilter } = state

  return (
<>
<div data-aos="fade-up" data-aos-duration="1000" >
<Container>
<Row style={{marginTop:"70px"}} className="p-4">
<p className="text-center text-orange"><b></b>Based on TNEA 2020 Allotment  - Click on header for sorting data ascending🔼 or descending🔽 order</p>
              <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
            </Row >
</Container>

    
    <Container fluid style={{maxHeight:"58vh", overflowY:"auto"}} className="tabledata border-1">
    <Table hover bordered {...getTableProps()}  className="table-sm table-responsive text-center table "  >
      <thead > 
        {headerGroups.map(headerGroup => (    
          
          <tr {...headerGroup.getHeaderGroupProps()} >
            
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps(column.getSortByToggleProps())} style={{position: "sticky",top:"0",background:"white"}}>{column.render('Header')}
               <span>
                  {column.isSorted
                    ? column.isSortedDesc
                      ? ' 🔽'
                      : ' 🔼'
                    : ''}
                </span>
                <div>{column.canFilter ? column.render('Filter') : null}</div>
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td  {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </Table>
  </Container>
  </div>
 </>
  )
}
export default Basictable;