import React, { useState, useCallback } from "react";
import PropTypes from "prop-types";
import MachineTableRow from "./MachineTableRow";
import MachineAccordion from "./MachineAccordion";
import { ViewModes } from "./ViewModeSelection";
import { useToast } from "../../../hooks";
import { LastPage, RotateLeft, Launch, Stop } from "@material-ui/icons";
import { useTranslation } from "react-i18next";
import useApi from "../../../api";

const MachineContainer = ({ machine, viewMode }) => {
  const [logs, setLogs] = useState([]);

  const { success, error } = useToast();
  const { t } = useTranslation();

  const api = useApi();

  const addLog = useCallback(
    text => {
      setLogs(prev => [...prev, text]);
    },
    [setLogs]
  );

  const manageActionResponse = useCallback(
    response => {
      addLog(`Success: ${response.success}. Status: ${response.status}`);
      if (response.success) {
        success(response.status);
      } else {
        error(response.status);
      }
    },
    [error, success, addLog]
  );

  const pingMachine = useCallback(
    async machine => {
      await api.pingMachine(machine.machineId, {
        onCompleted: manageActionResponse
      });
    },
    [manageActionResponse, api]
  );

  const shutdownMachine = useCallback(
    async machine => {
      await api.shutdownMachine(machine.machineId, 0, false, {
        onCompleted: manageActionResponse
      });
    },
    [manageActionResponse, api]
  );

  const restartMachine = useCallback(
    async machine => {
      await api.restartMachine(machine.machineId, 0, false, {
        onCompleted: manageActionResponse
      });
    },
    [manageActionResponse, api]
  );

  const actions = [
    {
      code: "ping",
      effect: pingMachine,
      icon: LastPage,
      tooltip: t("Machine.Actions.Ping"),
      main: true
    },
    {
      code: "shutdown",
      effect: shutdownMachine,
      icon: Stop,
      tooltip: t("Machine.Actions.Shutdown"),
      main: false
    },
    {
      code: "restart",
      effect: restartMachine,
      icon: RotateLeft,
      tooltip: t("Machine.Actions.Restart"),
      main: false
    },
    {
      code: "advanced",
      effect: () => {},
      icon: Launch,
      tooltip: t("Machine.Actions.Advanced"),
      main: false
    }
  ];

  return (
    <>
      {viewMode === ViewModes.TABLE && (
        <MachineTableRow
          machine={machine}
          actions={actions}
          logs={logs}
          addLog={addLog}
        />
      )}
      {viewMode === ViewModes.ACCORDION && (
        <MachineAccordion
          machine={machine}
          actions={actions}
          logs={logs}
          addLog={addLog}
        />
      )}
    </>
  );
};

MachineContainer.propTypes = {
  machine: PropTypes.object.isRequired,
  viewMode: PropTypes.string.isRequired
};

export default MachineContainer;