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 {
    Box,
    Card,
    Checkbox,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TablePagination,
    TableRow,
    Typography,
    colors,
    makeStyles
  } from '@material-ui/core';
  import ClientOptions from './clientOptions';
  
  const useStyles = makeStyles((theme) => ({
    root: {},
    avatar: {
      marginRight: theme.spacing(2)
    },
    trial: {
      color: colors.yellow[600]
    },
    expired: {
      color: colors.orange[600]
    },
    paid: {
      color: colors.green[600]
    },
    disabled: {
      color: colors.red[900]
    }
  }));
  
  const Results = ({ className, customers, onUpdateClient, ...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);
    };
  
    const updateClient = () => {
      onUpdateClient();
    };
  
    const status = (client) => {
      if (client.status === 'trial') {
        const today = new Date().getTime();
        if (today > client.registrationDate + 1000*60*60*24*30) {
          return 'expired';
        } else {
          return 'trial';
        }
      } else {
        return client.status;
      }
    };
  
    return (
      <Card
        className={clsx(classes.root, className)}
        {...rest}
      >
        <PerfectScrollbar>
          <Box minWidth={1050}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell padding="checkbox" width="5%">
                    <Checkbox
                      checked={selectedCustomerIds.length === customers.length}
                      color="primary"
                      indeterminate={
                        selectedCustomerIds.length > 0
                        && selectedCustomerIds.length < customers.length
                      }
                      onChange={handleSelectAll}
                    />
                  </TableCell>
                  <TableCell>
                    Email
                  </TableCell>
                  <TableCell width="15%">
                    Status
                  </TableCell>
                  <TableCell width="15%">
                    Registration date
                  </TableCell>
                  <TableCell width="1%">
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {customers.slice(0, limit).map((customer) => (
                  <TableRow
                    hover
                    key={customer.id}
                    selected={selectedCustomerIds.indexOf(customer.id) !== -1}
                  >
                    <TableCell padding="checkbox">
                      <Checkbox
                        checked={selectedCustomerIds.indexOf(customer.id) !== -1}
                        onChange={(event) => handleSelectOne(event, customer.id)}
                        value="true"
                      />
                    </TableCell>
                    <TableCell>
                      {customer.email}
                    </TableCell>
                    <TableCell>
                      <Typography
                        className={classes[status(customer)]}
                        variant="h5"
                      >
                        {status(customer)}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      {customer.registrationDate ? moment(customer.registrationDate).format('DD/MM/YYYY') : '-'}
                    </TableCell>
                  <TableCell align='right'>
                    <ClientOptions client={customer} onUpdateClient={updateClient} />
                  </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;
  