text: import React, { useState } from 'react';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import moment from 'moment';
  import PerfectScrollbar from 'react-perfect-scrollbar';
  import {
    Avatar,
    Box,
    Card,
    Checkbox,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TablePagination,
    TableRow,
    Typography,
    makeStyles
  } from '@material-ui/core';
  import getInitials from 'src/utils/getInitials';
  import { Edit, Trash } from 'react-feather';
  
  const useStyles = makeStyles(theme => ({
    root: {},
    avatar: {
      marginRight: theme.spacing(2)
    }
  }));
  
  const Results = ({ className, stocks, getEditData, ...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 = stocks.map(stock => stock.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>
            <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>SI.NO</TableCell>
                  <TableCell>Product</TableCell>
                  <TableCell>Pack</TableCell>
                  <TableCell>Quantity</TableCell>
                  <TableCell>Rate</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {stocks.slice(0, limit).map((stock, index) => (
                  <TableRow
                    hover
                    key={stock.id}
                    // selected={selectedCustomerIds.indexOf(stock.id) !== -1}
                  >
                    {/* <TableCell padding="checkbox">
                      <Checkbox
                        checked={selectedCustomerIds.indexOf(customer.id) !== -1}
                        onChange={event => handleSelectOne(event, customer.id)}
                        value="true"
                      />
                    </TableCell> */}
                    {/* <TableCell>
                      <Box alignItems="center" display="flex">
                        <Avatar
                          className={classes.avatar}
                          src={customer.avatarUrl}
                        >
                          {getInitials(customer.name)}
                        </Avatar>
                        <Typography color="textPrimary" variant="body1">
                          {customer.name}
                        </Typography>
                      </Box>
                    </TableCell> */}
                    <TableCell>{index + 1}</TableCell>
                    <TableCell>{stock.medName}</TableCell>
                    <TableCell>{stock.pack}</TableCell>
                    <TableCell>{stock.quantity}</TableCell>
                    <TableCell>{stock.rate}</TableCell>
                    <TableCell>
                      {' '}
                      <div
                        style={{
                          padding: '5px',
                          display: 'flex',
                          backgroundColor: '#845ec2',
                          justifyContent: 'center',
                          alignItems: 'center',
                          color: 'white',
                          borderRadius: '10px',
                          cursor: 'pointer'
                        }}
                        onClick={() => {
                          getEditData(stock);
                        }}
                      >
                        <Edit size={18} />
                      </div>
                    </TableCell>
                    <TableCell>
                      <div
                        style={{
                          padding: '5px',
                          display: 'flex',
                          backgroundColor: 'red',
                          justifyContent: 'center',
                          alignItems: 'center',
                          color: 'white',
                          borderRadius: '10px',
                          cursor: 'pointer'
                        }}
                      >
                        <Trash size={18} />
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Box>
        </PerfectScrollbar>
        <TablePagination
          component="div"
          count={stocks.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;
  