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,UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';
import {branchdata} from './branchdata.js';


const Basictable1 = () => {
    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 (
<>
<Container>
  <Row style={{marginTop:"50px"}} >
  <div className="text-center">
    <Button  className="border-0 m-1 bg-black" color="dark" style={{paddingRight:"25px",paddingLeft:"25px",marginBottom: '2rem'}} id="toggler">
      Branch Code Details - Click here!
    </Button>
    <UncontrolledCollapse toggler="#toggler">
      <Card>
        <CardBody>
          <Table bordered hover>
            <thead>
              <tr>
                <th>BRANCH NAME</th>
                <th>BRANCH CODE</th>
              </tr>
            </thead>
            <tbody>
            {branchdata.map((content)=> (
             <tr key={content.id}>
               <td>
                 {content.BRANCHCODE}
               </td>
               <td>
                 {content.BRANCHNAME}
               </td>
             </tr>
            ))}
            </tbody>

          </Table>
        </CardBody>
      </Card>
    </UncontrolledCollapse>
  </div>


  </Row>
<Row className="p-4">
<p className="text-center text-orange"><b></b>College Details with Branchs Available - Click on header for sorting data ascending🔼 or descending🔽 order</p>
              <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
            </Row >
</Container>

    
    <Container fluid style={{maxHeight:"59vh", overflowY:"auto",overflowX:"scroll"}} 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>
 </>
  )
}
export default Basictable1;