text: import React, {useState, useEffect, useCallback} from "react";
  import { Link, Redirect } from "react-router-dom";
  import api from 'api/api'
  
  // reactstrap components
  import {
    Card,
    CardHeader,
    CardFooter,
    DropdownMenu,
    DropdownItem,
    UncontrolledDropdown,
    DropdownToggle,
    Pagination,
    PaginationItem,
    PaginationLink,
    Table,
    Container,
    Row,
    Form,
    FormGroup,
    InputGroupAddon,
    InputGroupText,
    Input,
    InputGroup,
  } from "reactstrap";
  // core components
  import Header from "components/Headers/Header.js";
  
  
  
  function Tables (){
  
    const getToken = localStorage.getItem('token')
    const [employee_data, setEmployee_data] = useState([])
  
    const [allMessagesLength, setAllMessagesLength] = useState(0);  // all messages data array length
    const [search, setSearch] = useState('')
      
  
    const getEmployee = useCallback((current_page) => {
      let mounted = true;
      api.get(`employees/list?page=${current_page ? current_page : 1}`, {headers: {Authorization: `Token ${getToken}`}})
      .then(res=> {
        console.log(res)
        if (mounted) {
          if (res.results){
            setEmployee_data(res.results)
            setAllMessagesLength(res.count)
          }
          else {
            return null
          }
        }
      })
      .catch(err => {
        if (mounted) {
          if (err) {
            alert(err.message ? err.message : 'Internal Server Error.')
          }
        }
      })
      }, [getToken], 
    )
  
    useEffect(() => {  
      getEmployee()
    },[])
  
  const [currentPage, setCurrentPage] = useState(1);
  const nextPage = (current_page) => {
    if (currentPage*10 < allMessagesLength) {
      getEmployee(current_page + 1);
      setCurrentPage(currentPage + 1)
    }
  }
  const prevPage = (current_page) => {
    if (currentPage !== 1) {
      getEmployee(current_page - 1);
      setCurrentPage(currentPage - 1)
    }
  }
  
  if(getToken == null){
    return <Redirect to = "/auth/login"/>
  }
  
    return (
      <>
        <Header />
        {/* Page content */}
        <Container className="mt--7" fluid>
          {/* Table */}
          <Row>
            <div className="col">
              <Card className="shadow">
                <CardHeader className="border-0" style={{display:"flex"}}>
                  <h2 className="mb-0" style={{color:"indigo"}}>Employee List Table</h2>
                  <Form className="navbar-search form-inline d-none d-md-flex ml-md-auto" style={{float:"right", color: "lightblue"}}>
                      <FormGroup className="mb-0">
                        <InputGroup className="input-group-alternative">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="fas fa-search" style={{color: "lightblue"}} />
                            </InputGroupText>
                          </InputGroupAddon >
                          <Input 
                            placeholder="Search Username" 
                            type="text" 
                            style={{color: "lightblue"}}
                            onChange={e=> setSearch(e.target.value)}
                            
                            />
                        </InputGroup>
                      </FormGroup>
                    </Form>
                </CardHeader>
                <Table className="align-items-center table-flush" responsive>
                  <thead className="thead-light" >
                    <tr >
                      <th scope="col" style={{color: "indigo"}}>USERNAME</th>
                      <th scope="col" style={{color: "indigo"}}>NAME</th>
                      <th scope="col" style={{color: "indigo"}}>COMPANY</th>
                      <th scope="col" style={{color: "indigo"}}>CONTACT NO.</th>
                      <th scope="col" style={{color: "indigo"}}>EMAIL</th>
                      <th scope="col"></th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                  {employee_data.filter((item)=>{
                    if(search == ''){
                      return item
                    }
                    else if (item.employee_number.toLowerCase().includes(search.toLowerCase())){
                      return item
                    }
                  })
                  .map((item)=>{
                    return(
  
                  
                    <tr>
                      <th scope="row">{item.employee_number}</th>
                      <td>{item.name}</td>
                      <td>{item.company_name}</td>
                      <td>{item.cel_no}</td>
                      <td>{item.email}</td>
                      <td className="text-right">
                        <UncontrolledDropdown>
                          <DropdownToggle
                            className="btn-icon-only text-light"
                            href="#pablo"
                            role="button"
                            size="sm"
                            color=""
                            onClick={(e) => e.preventDefault()}
                          >
                            <i className="fas fa-ellipsis-v" />
                          </DropdownToggle>
                          <DropdownMenu className="dropdown-menu-arrow" right>
                            <DropdownItem style={{backgroundColor: "transparent"}} onClick={e => localStorage.setItem('emp_id', item.employee_id)}> 
                                <Link to="/admin/ManageRecords" style={{color: "black"}}>Manage Records</Link>
                            </DropdownItem>
                            {/* <DropdownItem style={{backgroundColor: "transparent"}}>
                                <Link to="/admin/ManageFiles" style={{color: "black"}}>Manage Files</Link> 
                            </DropdownItem>
                            <DropdownItem style={{backgroundColor: "transparent"}}>
                                <Link to="/admin/AttendanceLogs" style={{color: "black"}}>View Attendance Logs</Link>
                            </DropdownItem> */}
                          </DropdownMenu>
                        </UncontrolledDropdown>
                      </td>
                    </tr>
                    )
                  })}
                  
                  </tbody>
                </Table>
                <CardFooter className="py-4">
                 
                  <nav aria-label="...">
                  <Pagination
                      className="pagination justify-content-end mb-0"
                      listClassName="justify-content-end mb-0"
                    > 
                      <PaginationItem>
                        <PaginationLink onClick={() => prevPage(currentPage)}>
                          <i className="fas fa-angle-left" />
                          <span className="sr-only">Previous</span>
                        </PaginationLink>
                      </PaginationItem>
  
                      <PaginationItem className="active">
                        <PaginationLink>{currentPage}</PaginationLink>
                      </PaginationItem>
                     
                      <PaginationItem>
                        <PaginationLink onClick={() => nextPage(currentPage)}>
                          <i className="fas fa-angle-right" />
                          <span className="sr-only">Next</span>
                        </PaginationLink>
                      </PaginationItem>
                    </Pagination>
                  </nav>
                </CardFooter>
              </Card>
            </div>
          </Row>
          {/* Dark table */}
          
           
        </Container>
      </>
    );
  };
  
  export default Tables;
  