text: import React, { useState } from "react";
  import clsx from "clsx";
  import PropTypes from "prop-types";
  import moment from "moment";
  import { Link } from "react-router-dom";
  import PerfectScrollbar from "react-perfect-scrollbar";
  import {
    Button,
    Box,
    Card,
    Checkbox,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TablePagination,
    TableRow,
    Typography,
    makeStyles,
  } from "@material-ui/core";
  import CheckCircleIcon from "@material-ui/icons/CheckCircle";
  import CancelRoundedIcon from "@material-ui/icons/CancelRounded";
  import MenuIcon from "@material-ui/icons/Menu";
  
  const useStyles = makeStyles((theme) => ({
    root: {},
    avatar: {
      marginRight: theme.spacing(2),
    },
    statsIcon: {
      marginRight: theme.spacing(1),
    },
  }));
  
  const Results = ({ className, customers, ...rest }) => {
    const classes = useStyles();
    const [selectedCustomerIds, setSelectedCustomerIds] = useState([]);
    const [limit, setLimit] = useState(10);
    const [page, setPage] = useState(0);
  
    const handleSelectAll = (event) => {
      let newSelectedCustomerIds;
  
      if (event.target.checked) {
        newSelectedCustomerIds = customers.map((customer) => customer.id);
      } else {
        newSelectedCustomerIds = [];
      }
  
      setSelectedCustomerIds(newSelectedCustomerIds);
    };
  
    const handleSelectOne = (event, id) => {
      const selectedIndex = selectedCustomerIds.indexOf(id);
      let newSelectedCustomerIds = [];
  
      if (selectedIndex === -1) {
        newSelectedCustomerIds = newSelectedCustomerIds.concat(
          selectedCustomerIds,
          id
        );
      } else if (selectedIndex === 0) {
        newSelectedCustomerIds = newSelectedCustomerIds.concat(
          selectedCustomerIds.slice(1)
        );
      } else if (selectedIndex === selectedCustomerIds.length - 1) {
        newSelectedCustomerIds = newSelectedCustomerIds.concat(
          selectedCustomerIds.slice(0, -1)
        );
      } else if (selectedIndex > 0) {
        newSelectedCustomerIds = newSelectedCustomerIds.concat(
          selectedCustomerIds.slice(0, selectedIndex),
          selectedCustomerIds.slice(selectedIndex + 1)
        );
      }
  
      setSelectedCustomerIds(newSelectedCustomerIds);
    };
  
    const handleLimitChange = (event) => {
      setLimit(event.target.value);
    };
  
    const handlePageChange = (event, newPage) => {
      setPage(newPage);
    };
  
    return (
      <Card className={clsx(classes.root, className)} {...rest}>
        <PerfectScrollbar>
          <Box minWidth={1050}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell padding="checkbox">
                    <Checkbox
                      checked={selectedCustomerIds.length === customers.length}
                      color="primary"
                      indeterminate={
                        selectedCustomerIds.length > 0 &&
                        selectedCustomerIds.length < customers.length
                      }
                      onChange={handleSelectAll}
                    />
                  </TableCell>
                  <TableCell align="center">Código</TableCell>
                  <TableCell align="center">Área</TableCell>
                  <TableCell align="center">Fecha de Registro</TableCell>
                  <TableCell align="center">Estado</TableCell>
                  <TableCell align="center"></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {customers.slice(0, limit).map((customer) => (
                  <TableRow
                    hover
                    key={customer.id}
                    selected={selectedCustomerIds.indexOf(customer.id) !== -1}
                  >
                    <TableCell padding="checkbox" align="center">
                      <Checkbox
                        checked={selectedCustomerIds.indexOf(customer.id) !== -1}
                        onChange={(event) => handleSelectOne(event, customer.id)}
                        value="true"
                      />
                    </TableCell>
                    <TableCell align="center">
                      <Typography color="textPrimary" variant="body1">
                        <Link to="/app/tramites/tramite-detalles">
                          {customer.n}
                        </Link>
                      </Typography>
                    </TableCell>
                    <TableCell align="center">{customer.area}</TableCell>
                    <TableCell align="center">
                      {moment(customer.createdAt).format("DD/MM/YYYY")}
                    </TableCell>
                    <TableCell align="center">
                      {customer.state ? (
                        <>
                          <CheckCircleIcon
                            className={classes.statsIcon}
                            htmlColor="#52b202"
                          />
                          <Typography color="textPrimary" variant="body1">
                            ACTIVO
                          </Typography>
                        </>
                      ) : (
                        <>
                          <CancelRoundedIcon
                            className={classes.statsIcon}
                            htmlColor="#E50000"
                          />
                          <Typography color="textPrimary" variant="body1">
                            INACTIVO
                          </Typography>
                        </>
                      )}
                    </TableCell>
                    <TableCell align="center">
                      <Button
                        variant="contained"
                        color="primary"
                        startIcon={<MenuIcon />}
                      >
                        Opciones
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Box>
        </PerfectScrollbar>
        <TablePagination
          component="div"
          count={customers.length}
          onChangePage={handlePageChange}
          onChangeRowsPerPage={handleLimitChange}
          page={page}
          rowsPerPage={limit}
          rowsPerPageOptions={[5, 10, 25]}
        />
      </Card>
    );
  };
  
  Results.propTypes = {
    className: PropTypes.string,
    customers: PropTypes.array.isRequired,
  };
  
  export default Results;
  