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

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

const ActionButton = React.forwardRef((props, _ref) => {
  const { action, machine } = props;
  return (
    <Tooltip
      id={`machine-item-${machine.machineId}-${action.code}-tooltip`}
      title={action.tooltip}
    >
      <span>
        <IconButton
          id={`machine-item-${machine.machineId}-${action.code}`}
          size={"small"}
          onClick={action.system ? action.effect : action.effect(machine)}
        >
          <action.icon />
        </IconButton>
      </span>
    </Tooltip>
  );
});

ActionButton.propTypes = {
  machine: PropTypes.shape({
    machineId: PropTypes.number.isRequired
  }).isRequired,
  action: PropTypes.shape({
    code: PropTypes.string.isRequired,
    tooltip: PropTypes.string.isRequired,
    system: PropTypes.bool,
    effect: PropTypes.func.isRequired
  }).isRequired
};

const Machine = ({
  machine,
  actions,
  logs,
  addLog,
  secondaryActionsMenuProps
}) => {
  const [open, setOpen] = React.useState(false);
  const classes = useRowStyles();

  const topActions = useMemo(
    () => actions.filter(a => a.top === true),
    [actions]
  );

  const secondaryActions = useMemo(
    () => actions.filter(a => a.top === false),
    [actions]
  );

  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>{machine.macAddress}</TableCell>
        <TableCell align="right">
          <WakeComponent machine={machine} addLog={addLog} />
          {topActions.map(action => (
            <ActionButton
              key={`machine-item-${machine.machineId}-${action.code}`}
              action={action}
              machine={machine}
            />
          ))}
          <Menu
            id="secondary-actions-menu"
            anchorEl={secondaryActionsMenuProps.anchor}
            keepMounted
            open={Boolean(secondaryActionsMenuProps.anchor)}
            onClose={secondaryActionsMenuProps.onCloseSecondaryActions}
          >
            {secondaryActions.map(action => (
              <ActionButton
                key={`machine-item-${machine.machineId}-${action.code}`}
                action={action}
                machine={machine}
              />
            ))}
          </Menu>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <MachineLog logs={logs} />
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
};

Machine.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,
  actions: PropTypes.array.isRequired,
  logs: PropTypes.array.isRequired,
  addLog: PropTypes.func.isRequired,
  secondaryActionsMenuProps: PropTypes.object.isRequired
};

export default Machine;