import React, { useState, useCallback } from "react";
import PropTypes from "prop-types";
import Machine from "./Machine";
import * as api from "../api";
import { useToast } from "../../../hooks";
import { LastPage } from "@material-ui/icons";
import { useTranslation } from "react-i18next";

const MachineContainer = ({ machine }) => {
  const [logs, setLogs] = useState([]);
  const { success, error } = useToast();
  const { t } = useTranslation();

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

  const pingMachine = useCallback(
    machine => async () => {
      const result = await api.pingMachine(
        machine.iPv4Address || machine.machineName
      );
      addLog(`Success: ${result.success}. Status: ${result.status}`);
      if (result.success) {
        success(result.status);
      } else {
        error(result.status);
      }
    },
    [error, success, addLog]
  );

  const actions = [
    {
      code: "ping",
      effect: pingMachine,
      icon: LastPage,
      tooltip: t("Machine.Actions.Ping")
    }
  ];

  return (
    <Machine machine={machine} actions={actions} logs={logs} addLog={addLog} />
  );
};

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

export default MachineContainer;