text: import React from "react";
  import classNames from "classnames";
  import PropTypes from "prop-types";
  import { withStyles } 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 TableHead from "@material-ui/core/TableHead";
  import TablePagination from "@material-ui/core/TablePagination";
  import TableRow from "@material-ui/core/TableRow";
  import TableSortLabel from "@material-ui/core/TableSortLabel";
  import Toolbar from "@material-ui/core/Toolbar";
  import Typography from "@material-ui/core/Typography";
  import Paper from "@material-ui/core/Paper";
  import Checkbox from "@material-ui/core/Checkbox";
  import IconButton from "@material-ui/core/IconButton";
  import Tooltip from "@material-ui/core/Tooltip";
  import DeleteIcon from "@material-ui/icons/Delete";
  import FilterListIcon from "@material-ui/icons/FilterList";
  import { lighten } from "@material-ui/core/styles/colorManipulator";
  import strings from "../strings";
  
  function desc(a, b, orderBy) {
    if (b[orderBy] < a[orderBy]) return -1;
    if (b[orderBy] > a[orderBy]) return 1;
    return 0;
  }
  
  function stableSort(array, cmp) {
    const stabilizedThis = array.map((el, index) => [el, index]);
    stabilizedThis.sort((a, b) => {
      const order = cmp(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    return stabilizedThis.map((el) => el[0]);
  }
  
  function getSorting(order, orderBy) {
    return order === "desc" ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
  }
  
  const rows = [
    { id: "time", numeric: false, disablePadding: true, label: strings.timeOfDay },
    { id: "pm10", numeric: true, disablePadding: false, label: strings.pm1 },
    { id: "pm2.5", numeric: true, disablePadding: false, label: strings.pm2 },
    { id: "temp", numeric: true, disablePadding: false, label: strings.temperature },
    { id: "humidity", numeric: true, disablePadding: false, label: strings.humidity },
    { id: "pressure", numeric: true, disablePadding: false, label: strings.pressure },
  ];
  
  class EnhancedTableHead extends React.Component {
    createSortHandler = (property) => (event) => {
      this.props.onRequestSort(event, property);
    };
  
    render() {
      const { onSelectAllClick, order, orderBy, numSelected, rowCount } = this.props;
  
      return (
        <TableHead>
          <TableRow>
            <TableCell padding="checkbox">
              <Checkbox indeterminate={numSelected > 0 && numSelected < rowCount} checked={numSelected === rowCount} onChange={onSelectAllClick} />
            </TableCell>
            {rows.map((row) => {
              return (
                <TableCell key={row.id} align={row.numeric ? "right" : "left"} padding={row.disablePadding ? "none" : "default"} sortDirection={orderBy === row.id ? order : false} >
                  <Tooltip title="Sortieren" placement={row.numeric ? "bottom-end" : "bottom-start"} enterDelay={300} >
                    <TableSortLabel active={orderBy === row.id} direction={order} onClick={this.createSortHandler(row.id)} >
                      {row.label}
                    </TableSortLabel>
                  </Tooltip>
                </TableCell>
              );
            }, this)}
          </TableRow>
        </TableHead>
      );
    }
  }
  
  EnhancedTableHead.propTypes = {
    numSelected: PropTypes.number.isRequired,
    onRequestSort: PropTypes.func.isRequired,
    onSelectAllClick: PropTypes.func.isRequired,
    order: PropTypes.string.isRequired,
    orderBy: PropTypes.string.isRequired,
    rowCount: PropTypes.number.isRequired,
  };
  
  const toolbarStyles = (theme) => ({
    root: {
      paddingRight: theme.spacing(1),
    },
    highlight:
      theme.palette.type === "light"
        ? {
            color: theme.palette.secondary.main,
            backgroundColor: lighten(theme.palette.secondary.light, 0.85),
          }
        : {
            color: theme.palette.text.primary,
            backgroundColor: theme.palette.secondary.dark,
          },
    spacer: {
      flex: "1 1 100%",
    },
    actions: {
      color: theme.palette.text.secondary,
    },
    title: {
      flex: "0 0 auto",
    },
  });
  
  let EnhancedTableToolbar = (props) => {
    const { numSelected, classes } = props;
  
    return (
      <Toolbar className={classNames(classes.root, { [classes.highlight]: numSelected > 0 })} >
        <div className={classes.title}>
          {numSelected > 0 ? (<Typography color="inherit" variant="subtitle1">{numSelected} Datensätze ausgewählt</Typography>) : (<Typography variant="h6" id="tableTitle">Datensätze der Messdaten</Typography>)}
        </div>
        <div className={classes.spacer} />
        <div className={classes.actions}>
          {numSelected > 0 ? (
            <Tooltip title={strings.delete}>
              <IconButton aria-label={strings.delete}>
                <DeleteIcon />
              </IconButton>
            </Tooltip>
          ) : (
            <Tooltip title={strings.availableSoon}>
              <IconButton aria-label={strings.availableSoon}>
                <FilterListIcon />
              </IconButton>
            </Tooltip>
          )}
        </div>
      </Toolbar>
    );
  };
  
  EnhancedTableToolbar.propTypes = {
    classes: PropTypes.object.isRequired,
    numSelected: PropTypes.number.isRequired,
  };
  
  EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar);
  
  const styles = (theme) => ({
    root: {
      width: "100%",
      marginTop: theme.spacing(3),
    },
    table: {
      minWidth: 1020,
    },
    tableWrapper: {
      overflowX: "auto",
    },
  });
  
  class EnhancedTable extends React.Component {
    state = {
      order: "asc",
      orderBy: "calories",
      selected: [],
      page: 0,
      rowsPerPage: 25,
    };
  
    handleRequestSort = (event, property) => {
      const orderBy = property;
      let order = "desc";
  
      if (this.state.orderBy === property && this.state.order === "desc") order = "asc";
  
      this.setState({
        order,
        orderBy
      });
    };
  
    handleSelectAllClick = (event) => {
      if (event.target.checked) {
        this.setState({
          selected: this.props.data.map((n) => n.id)
        });
        return;
      }
      this.setState({
        selected: []
      });
    };
  
    handleClick = (event, id) => {
      const { selected } = this.state;
      const selectedIndex = selected.indexOf(id);
      let newSelected = [];
  
      if (selectedIndex === -1) {
        newSelected = newSelected.concat(selected, id);
      } else if (selectedIndex === 0) {
        newSelected = newSelected.concat(selected.slice(1));
      } else if (selectedIndex === selected.length - 1) {
        newSelected = newSelected.concat(selected.slice(0, -1));
      } else if (selectedIndex > 0) {
        newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
      }
  
      this.setState({
        selected: newSelected
      });
    };
  
    handleChangePage = (event, page) => {
      this.setState({
        page
      });
    };
  
    handleChangeRowsPerPage = (event) => {
      this.setState({
        rowsPerPage: event.target.value
      });
    };
  
    isSelected = (id) => this.state.selected.indexOf(id) !== -1;
  
    render() {
      const { classes, data } = this.props;
      const { order, orderBy, selected, rowsPerPage, page } = this.state;
      const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
  
      return (
        <Paper className={classes.root}>
          <EnhancedTableToolbar numSelected={selected.length} />
          <div className={classes.tableWrapper}>
            <Table className={classes.table} aria-labelledby="tableTitle">
              <EnhancedTableHead numSelected={selected.length} order={order} orderBy={orderBy} onSelectAllClick={this.handleSelectAllClick} onRequestSort={this.handleRequestSort} rowCount={data.length} />
              <TableBody>
                {stableSort(data, getSorting(order, orderBy))
                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                  .map((n) => {
                    const isSelected = this.isSelected(n.id);
                    return (
                      <TableRow hover onClick={(event) => this.handleClick(event, n.id)} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.id} selected={isSelected}>
                        <TableCell padding="checkbox">
                          <Checkbox checked={isSelected} />
                        </TableCell>
                        <TableCell component="th" scope="row" padding="none"><b>{n.time}</b></TableCell>
                        <TableCell align="right">{n.pm1} µg/m³</TableCell>
                        <TableCell align="right">{n.pm2} µg/m³</TableCell>
                        <TableCell align="right" style={n.temp === 0 && n.humidity === 0 && n.pressure === 0 ? {color: "#F00"} : {}}>{n.temp === 0 && n.humidity === 0 && n.pressure === 0 ? "-" : n.temp + " °C"}</TableCell>
                        <TableCell align="right">{n.humidity !== 0 ? n.humidity + " %" : "-"}</TableCell>
                        <TableCell align="right">{n.pressure !== 0 ? n.pressure + " hPa" : "-"}</TableCell>
                      </TableRow>
                    );
                  })}
                {emptyRows > 0 && (
                  <TableRow style={{ height: 49 * emptyRows }}>
                    <TableCell colSpan={6} />
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
          <TablePagination rowsPerPageOptions={[25, 50, 100]} component="div" count={data.length} rowsPerPage={rowsPerPage} page={page} backIconButtonProps={{"aria-label": strings.previousPage}} nextIconButtonProps={{"aria-label": strings.nextPage}} onChangePage={this.handleChangePage} onChangeRowsPerPage={this.handleChangeRowsPerPage} />
        </Paper>
      );
    }
  }
  
  EnhancedTable.propTypes = {
    classes: PropTypes.object.isRequired,
    data: PropTypes.array.isRequired,
  };
  
  export default withStyles(styles)(EnhancedTable);
  