text: import React from 'react';
  import { useHistory } from 'react-router-dom';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import moment from 'moment';
  import PerfectScrollbar from 'react-perfect-scrollbar';
  import { makeStyles } from '@material-ui/styles';
  import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
  import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
  import OpenInNewIcon from '@material-ui/icons/OpenInNew';
  import { useCubeQuery } from '@cubejs-client/react';
  import CircularProgress from '@material-ui/core/CircularProgress';
  import {
    Card,
    CardActions,
    CardContent,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    TablePagination,
    Typography,
  } from '@material-ui/core';
  
  import StatusBullet from './StatusBullet';
  import palette from '../theme/palette';
  
  const useStyles = makeStyles((theme) => ({
    root: {
      padding: 0,
    },
    content: {
      padding: 0,
    },
    head: {
      backgroundColor: palette.background.gray,
    },
    inner: {
      minWidth: 1050,
    },
    nameContainer: {
      display: 'flex',
      alignItems: 'baseline',
    },
    status: {
      marginRight: theme.spacing(2),
    },
    actions: {
      justifyContent: 'flex-end',
    },
    tableRow: {
      padding: '0 5px',
      '.MuiTableRow-root.MuiTableRow-hover&:hover': {
        backgroundColor: palette.primary.action,
      },
    },
    hoverable: {
      '&:hover': {
        color: `${palette.primary.normal}`,
        cursor: `pointer`,
      },
    },
    arrow: {
      fontSize: 10,
      position: 'absolute',
    },
  }));
  
  const statusColors = {
    completed: 'success',
    processing: 'info',
    shipped: 'danger',
  };
  
  const TableComponent = (props) => {
    const history = useHistory();
  
    function handleClick(str) {
      history.push(str);
    }
  
    const {
      className,
      sorting,
      setSorting,
      query,
      countQuery,
      rowsPerPage,
      page,
      setRowsPerPage,
      setPage,
      ...rest
    } = props;
  
    const classes = useStyles();
  
    const tableHeaders = [
      {
        text: 'Order id',
        value: 'Orders.id',
      },
      {
        text: 'Orders size',
        value: 'Orders.size',
      },
      {
        text: 'Full Name',
        value: 'Users.fullName',
      },
      {
        text: 'User city',
        value: 'Users.city',
      },
      {
        text: 'Order price',
        value: 'Orders.price',
      },
      {
        text: 'Status',
        value: 'Orders.status',
      },
      {
        text: 'Created at',
        value: 'Orders.createdAt',
      },
    ];
    const load = useCubeQuery(query);
    const count = useCubeQuery(countQuery);
    if (load.isLoading || count.isLoading) {
      return (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: `${124 + rowsPerPage * 54}px`,
            background: '#fff',
            borderRadius: '5px',
          }}
        >
          <CircularProgress color="secondary" />
        </div>
      );
    }
    if (load.error || count.error) {
      return <pre>{load.error.toString()}</pre>;
    }
    if (!load.resultSet || !count.resultSet) {
      return null;
    }
    if (load.resultSet && count.resultSet) {
      let orders = load.resultSet.tablePivot();
  
      const handlePageChange = (event, page) => {
        setPage(page);
      };
      const handleRowsPerPageChange = (event) => {
        setRowsPerPage(event.target.value);
      };
      const handleSetSorting = (str) => {
        setSorting([str, sorting[1] === 'desc' ? 'asc' : 'desc']);
      };
  
      return (
        <Card {...rest} padding={'0'} className={clsx(classes.root, className)}>
          <CardContent className={classes.content}>
            <PerfectScrollbar>
              <div className={classes.inner}>
                <Table>
                  <TableHead className={classes.head}>
                    <TableRow>
                      {tableHeaders.map((item) => (
                        <TableCell
                          key={item.value + Math.random()}
                          className={classes.hoverable}
                          onClick={() => {
                            handleSetSorting(`${item.value}`);
                          }}
                        >
                          <span>{item.text}</span>
                          <Typography className={classes.arrow} variant="body2" component="span">
                            {sorting[0] === item.value ? (
                              sorting[1] === 'desc' ? (
                                <KeyboardArrowUpIcon />
                              ) : (
                                <KeyboardArrowDownIcon />
                              )
                            ) : null}
                          </Typography>
                        </TableCell>
                      ))}
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {orders.map((obj) => (
                      <TableRow
                        className={classes.tableRow}
                        hover
                        key={obj['Orders.id']}
                      >
                        <TableCell>{obj['Orders.id']}</TableCell>
                        <TableCell>{obj['Orders.size']}</TableCell>
                        <TableCell
                          className={classes.hoverable}
                          onClick={() => handleClick(`/user/${obj['Users.id']}`)}
                        >
                          {obj['Users.fullName']}
                          &nbsp;
                          <Typography className={classes.arrow} variant="body2" component="span">
                            <OpenInNewIcon fontSize="small" />
                          </Typography>
                        </TableCell>
                        <TableCell>{obj['Users.city']}</TableCell>
                        <TableCell>{'$ ' + obj['Orders.price']}</TableCell>
                        <TableCell>
                          <StatusBullet className={classes.status} color={statusColors[obj['Orders.status']]} size="sm" />
                          {obj['Orders.status']}
                        </TableCell>
                        <TableCell>{moment(obj['Orders.createdAt']).format('DD/MM/YYYY')}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </PerfectScrollbar>
          </CardContent>
          <CardActions className={classes.actions}>
            <TablePagination
              component="div"
              count={parseInt(count.resultSet.tablePivot()[0]['Orders.count'])}
              onChangePage={handlePageChange}
              onChangeRowsPerPage={handleRowsPerPageChange}
              page={page}
              rowsPerPage={rowsPerPage}
              rowsPerPageOptions={[5, 10, 25, 50, 100]}
            />
          </CardActions>
        </Card>
      );
    }
  };
  
  TableComponent.propTypes = {
    className: PropTypes.string,
    query: PropTypes.object.isRequired,
  };
  
  export default TableComponent;
  