text: import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';
  import Table from '@material-ui/core/Table';
  import TableBody from '@material-ui/core/TableBody';
  import TableCell from '@material-ui/core/TableCell';
  import TableContainer from '@material-ui/core/TableContainer';
  import TableHead from '@material-ui/core/TableHead';
  import TableFooter from '@material-ui/core/TableFooter';
  import TablePagination from '@material-ui/core/TablePagination';
  import TableRow from '@material-ui/core/TableRow';
  import Paper from '@material-ui/core/Paper';
  import IconButton from '@material-ui/core/IconButton';
  import FirstPageIcon from '@material-ui/icons/FirstPage';
  import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
  import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
  import LastPageIcon from '@material-ui/icons/LastPage';
  //Import Modals
  import ModalEdit from './Modals/ModalEdit';
  import ModalExclude from './Modals/ModalExclude';
  
  
  const useStyles1 = makeStyles((theme) => ({
    root: {
      flexShrink: 0,
      marginLeft: theme.spacing(2.5),
    },
  }));
  
  function TablePaginationActions(props) {
    const classes = useStyles1();
    const theme = useTheme();
    const { count, page, rowsPerPage, onChangePage } = props;
  
    const handleFirstPageButtonClick = (event) => {
      onChangePage(event, 0);
    };
  
    const handleBackButtonClick = (event) => {
      onChangePage(event, page - 1);
    };
  
    const handleNextButtonClick = (event) => {
      onChangePage(event, page + 1);
    };
  
    const handleLastPageButtonClick = (event) => {
      onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
    };
  
    return (
      <div className={classes.root}>
        <IconButton
          onClick={handleFirstPageButtonClick}
          disabled={page === 0}
          aria-label="Primeira Página"
        >
          {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
        </IconButton>
        <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="Página Anterior">
          {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
        </IconButton>
        <IconButton
          onClick={handleNextButtonClick}
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          aria-label="Próxima Página"
        >
          {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
        </IconButton>
        <IconButton
          onClick={handleLastPageButtonClick}
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          aria-label="Última Página"
        >
          {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
        </IconButton>
      </div>
    );
  }
  
  TablePaginationActions.propTypes = {
    count: PropTypes.number.isRequired,
    onChangePage: PropTypes.func.isRequired,
    page: PropTypes.number.isRequired,
    rowsPerPage: PropTypes.number.isRequired,
  };
  
  
  
  
  const StyledTableCell = withStyles((theme) => ({
    head: {
      color: theme.palette.common.black,
    },
    body: {
      fontSize: 14,
    },
  }))(TableCell);
  
  
  
  
  
  
  const useStyles2 = makeStyles({
    table: {
      minWidth: 500,
    },
  });
  
  export default function CustomPaginationActionsTable(data) {
  
      let rows =  data.data;
    
    
      
  
  
    const classes = useStyles2();
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(5);
    const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
  
    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };
  
    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(parseInt(event.target.value, 10));
      setPage(0);
    };
  
    return (
      <TableContainer component={Paper} className="bg-white mt-5 border-black border-opacity-25 border-2">
        <Table className={classes.table} aria-label="custom pagination table">
        <TableHead>
            <TableRow>
              <StyledTableCell align="left"><strong>#</strong></StyledTableCell>
              <StyledTableCell align="left"><strong>Nome</strong></StyledTableCell>
              <StyledTableCell align="left"><strong>Usuário</strong></StyledTableCell>
              <StyledTableCell align="left"><strong>Status</strong></StyledTableCell>
              
              <StyledTableCell align="left"><strong>...</strong></StyledTableCell>
              <StyledTableCell align="left"><strong>...</strong></StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {(rowsPerPage > 0
              ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              : rows
            ).map((user) => (
  
              <TableRow key={user.id_operador}>
  
                  <TableCell style={{ width: 160 }} >
                      {user.id_operador}
                  </TableCell>
  
                  <TableCell style={{ width: 160 }}  align="left">
                      {user.nome}
                  </TableCell>
  
                  <TableCell style={{ width: 160 }} align="left">
                      {user.usuario}
                  </TableCell>
  
                  <TableCell style={{ width: 160 }} align="left">
                    {
  
                      user.estatus == 'ATIVO' ? (
                        
                        <div className="bg-green-500 rounded-lg text-center p-1">{user.estatus}</div>
  
                      ) : <div className="bg-red-600 rounded-lg text-center p-1">{user.estatus}</div>
  
                    }
                      
                  </TableCell>
                  <TableCell style={{ width: 160 }} align="left">
                      <ModalEdit user={user} />
                  </TableCell>
  
                  
                  <TableCell style={{ width: 160 }} align="left">
                      <ModalExclude user={user} />
                  </TableCell>
              </TableRow>
          
            ))}
  
            {emptyRows > 0 && (
              <TableRow style={{ height: 53 * emptyRows }}>
                <TableCell colSpan={6} />
              </TableRow>
            )}
          </TableBody>
          <TableFooter>
            <TableRow>
              <TablePagination
                rowsPerPageOptions={[5, 10, 25, { label: 'Todos', value: -1 }]}
                colSpan={3}
                count={rows.length}
                rowsPerPage={rowsPerPage}
                page={page}
                SelectProps={{
                  inputProps: { 'aria-label': 'Linhas por Página' },
                  native: true,
                }}
                onChangePage={handleChangePage}
                onChangeRowsPerPage={handleChangeRowsPerPage}
                ActionsComponent={TablePaginationActions}
              />
            </TableRow>
          </TableFooter>
        </Table>
      </TableContainer>
    );
  }
  