import React from "react";
import PropTypes from "prop-types";
import {
  TableCell,
  TableRow,
  IconButton,
  Collapse,
  Tooltip
} from "@material-ui/core";
import {
  KeyboardArrowDown,
  KeyboardArrowUp,
  PowerSettingsNew,
  LastPage
} from "@material-ui/icons";
import { makeStyles } from "@material-ui/core/styles";
import MachineLog from "./MachineLog";
import { useTranslation } from "react-i18next";

const useRowStyles = makeStyles({
  root: {
    "& > *": {
      borderBottom: "unset"
    }
  }
});

const MachineItem = ({ machine }) => {
  const [open, setOpen] = React.useState(false);
  const classes = useRowStyles();
  const { t } = useTranslation();

  const handleClick = event => {
    alert("asdasd");
  };

  return (
    <React.Fragment>
      <TableRow className={classes.root}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {machine.fullMachineName}
        </TableCell>
        <TableCell>{machine.machineName}</TableCell>
        <TableCell>{machine.iPv4Address}</TableCell>
        <TableCell align="right">
          <>
            <Tooltip title={t("General.Actions")}>
              <span>
                <IconButton
                  id={`machine-item-${machine.machineId}-wake`}
                  size={"small"}
                  disabled={false}
                  onClick={handleClick}
                >
                  <PowerSettingsNew />
                </IconButton>
              </span>
            </Tooltip>
            <Tooltip title={t("General.Actions")}>
              <span>
                <IconButton
                  id={`machine-item-${machine.machineId}-ping`}
                  size={"small"}
                  disabled={false}
                  onClick={handleClick}
                >
                  <LastPage />
                </IconButton>
              </span>
            </Tooltip>
          </>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <MachineLog />
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
};

MachineItem.propTypes = {
  machine: PropTypes.shape({
    machineId: PropTypes.number.isRequired,
    machineName: PropTypes.string.isRequired,
    fullMachineName: PropTypes.string.isRequired,
    macAddress: PropTypes.string.isRequired,
    iPv4Address: PropTypes.string,
    description: PropTypes.string
  }).isRequired
};

export default MachineItem;